首页 > 代码库 > Html5如何快速在页面中写出多个轮播图效果
Html5如何快速在页面中写出多个轮播图效果
我们在做项目的过程中，有时候客户需求要求你在同一个页面中，写几个不同样式的轮播图效果，那么如何快速实现呢？（要知道若果你每个轮播图都要用原生javascript写的话，会很麻烦，代码也不够简洁）
这里我们就可以借助插件来实现这一功能，swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>小米防丢器</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/swiper-3.3.1.min.css">
</head>
<body>
<section class="swiper-container swiper-container-part5 part5">
<ul class="swiper-wrapper">
<li class="swiper-slide"><img src="http://www.mamicode.com/img/wallet.jpg" ></li>
<li class="swiper-slide"><img src="http://www.mamicode.com/img/pet.jpg" ></li>
<li class="swiper-slide"><img src="http://www.mamicode.com/img/key.jpg" ></li>
<li class="swiper-slide"><img src="http://www.mamicode.com/img/bag.jpg" ></li>
<li class="swiper-slide"><img src="http://www.mamicode.com/img/camera.jpg" ></li>
<li class="swiper-slide"><img src="http://www.mamicode.com/img/computer.jpg" ></li>
</ul>
<!-- Add Pagination -->
<li class="swiper-pagination swiper-part5" id="part5" style="text-align: left;margin-left: 100px;margin-bottom: 25px"></li>
<!-- Add Arrows -->
<li class="swiper-button-next"></li>
<li class="swiper-button-prev"></li>
</section>
<section class="swiper-container swiper-container-part20 part20">
<img src="http://www.mamicode.com/img/ctr_hand.png" class="ctr_hand">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="http://www.mamicode.com/img/slide-ctr-photo.png" class="slide-ctr-photo">
<ul class="part20-ul1">
<li><h1>遥控自拍</h1></li>
<li><h1>解放双手、释放激情</h1></li>
<li><p>解放你的双手，给你充分的空间摆Pose，天地即秀场。打开小觅App自带的相机程序，即可轻松自拍。支持绝大部分第三方能够使用音量键作为快门按钮的相机App，如美图秀秀、美颜相机、柚子相机等。</p></li>
<li><p style="color: #00adee">实拍效果图</p></li>
<li class="photo-person-wrap-1">
<img src="http://www.mamicode.com/img/photo-person.png" id="photo-person1">
</li>
</ul>
</li>
<li class="swiper-slide">
<img src="http://www.mamicode.com/img/slide-ctr-music.jpg" class="slide-ctr-photo">
<ul class="part20-ul1">
<li><h1>遥控音乐</h1></li>
<li><h1>随心切歌</h1></li>
<li><p>享受音乐，当然要自由，音乐遥控，小觅一键掌控：打开小觅App自带的音乐播放器，即可单击暂停、双击下首，三击上首。广泛支持绝大部分音乐App，网易云音乐、QQ音乐、巨鲸等</p></li>
<li><p style="color: #00adee">Android 及 iOS版支持的音乐应用</p></li>
<li class="photo-person-wrap"><img src="http://www.mamicode.com/img/wangyi.png" id="photo-person2"></li>
</ul>
</li>
<li class="swiper-slide">
<img src="http://www.mamicode.com/img/slide-ctr-ppt.jpg" class="slide-ctr-photo">
<ul class="part20-ul1">
<li><h1>遥控PPT</h1></li>
<li><h1>放胆自信</h1></li>
<li><p>给你无限的空间掌控演讲，挥洒风采。能够支持Mac电脑以及Windows 8.1及以上自带蓝牙4.0的电脑</p></li>
<li><p style="color: #00adee">Mac及Windows上支持的幻灯片App</p></li>
<li class="photo-person-wrap"><img src="http://www.mamicode.com/img/ppt-logo.png" id="photo-person3"></li>
</ul>
</li>
</ul>
<!-- Add Pagination -->
<li class="swiper-pagination swiper-part20" style="text-align: center;margin-bottom: 650px"></li>
<!-- Add Arrows -->
<li class="swiper-button-next" style="position: absolute;right: 15%;background-color: #C6C6C6;opacity: 0.5;width:47px;border-radius: 50%"></li>
<li class="swiper-button-prev" style="position: absolute;left: 15%;background-color: #C6C6C6;opacity: 0.5;width: 47px;border-radius: 50%"></li>
</section>
<script src="http://www.mamicode.com/js/jquery-1.12.1.min.js"></script>
<script src="http://www.mamicode.com/swiper.min.js"></script>
<script>
$(function () {
var swiper1 = new Swiper(‘.swiper-container-part5‘, {
pagination: ‘.swiper-part5‘,
nextButton: ‘.swiper-button-next‘,
prevButton: ‘.swiper-button-prev‘,
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 4000,
autoplayDisableOnInteraction: false,
loop: true
});
$("#part5 span").css({
width: ‘1px‘,
height: ‘1px‘,
marginLeft: "45px",
display: "inline-block",
borderRadius: "10px",
backgroundColor: "white"
});
var imgs0 = new Image();
imgs0.src = "http://www.mamicode.com/img/wallet.png";
var imgs1 = new Image();
imgs1.src = "http://www.mamicode.com/img/pet.png";
var imgs2 = new Image();
imgs2.src = "http://www.mamicode.com/img/key.png";
var imgs3 = new Image();
imgs3.src = "http://www.mamicode.com/img/bag.png";
var imgs4 = new Image();
imgs4.src = "http://www.mamicode.com/img/camera.png";
var imgs5 = new Image();
imgs5.src = "http://www.mamicode.com/img/computer.png";
$("#part5 span ").eq(0).html(imgs0);
$("#part5 span ").eq(1).html(imgs1);
$("#part5 span ").eq(2).html(imgs2);
$("#part5 span ").eq(3).html(imgs3);
$("#part5 span ").eq(4).html(imgs4);
$("#part5 span ").eq(5).html(imgs5);
$("#part5 span img").css({
width: ‘30px‘,
height: ‘30px‘,
borderRadius: "0"
});
});$(function () {var swiper2 = new Swiper(‘.swiper-container-part20‘, {
pagination: ‘.swiper-part20‘,
nextButton: ‘.swiper-button-next‘,
prevButton: ‘.swiper-button-prev‘,
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 4000,
autoplayDisableOnInteraction: false,
loop: true
});
$(".swiper-part20 span ").css({
width:‘80px‘,
height:‘80px‘,
marginLeft:"85px",
display:"inline-block",
borderRadius:"10px",
backgroundColor:"#F7F7F7"
});
var imgs0 = new Image();
imgs0.src="http://www.mamicode.com/img/cameraBlue.png";
var imgs1 = new Image();
imgs1.src="http://www.mamicode.com/img/musicBlue.png";
var imgs2 = new Image();
imgs2.src="http://www.mamicode.com/img/pptBlue.png";
$(".swiper-part20 span ").eq(0).html(imgs0);
$(".swiper-part20 span ").eq(0).html(imgs0).append("<p style=‘color: #00AEEF‘>遥控自拍</p>");
$(".swiper-part20 span ").eq(1).html(imgs1);
$(".swiper-part20 span ").eq(1).html(imgs1).append("<p style=‘color: #00AEEF‘>遥控音乐</p>");
$(".swiper-part20 span ").eq(2).html(imgs2);
$(".swiper-part20 span ").eq(2).html(imgs2).append("<p style=‘color: #00AEEF‘>遥控ppt</p>");
$(".swiper-part20 span img").css({
width:‘80px‘,
height:‘70px‘,
borderRadius:"10px"
});
});</script></body>
</html>
注意看代码中的红色部分，由于swiper.js中的选择器名称是统一的，如果你直接拿来用的话，一个页面只能用一次，也就是说，如果你的页面有2个以上的轮播图，那么再不改名选择器名称的前提下他们之间会互相干扰，最终导致效果出不来或者报错；
所以我在每一个原有swiper-containter类名后面又加了自己的类选择器，用以区分，然后在JS代码当中，红色字体部分也要做出相应的修改；做完这两个步骤，基本就可以在页面中实现2个不同效果的轮播图同时正常工作了；页面中另外一部分css只
是对section本身的width和height；以及其在页面中的位置做了调整；所以这里就没有给出；有兴趣的读者，可以复制上述代码试试效果；
swiper.js 源代码 下载地址：http://www.swiper.com.cn/download/index.html#file7
Html5如何快速在页面中写出多个轮播图效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。