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="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="img/wallet.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/pet.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/key.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/bag.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/camera.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/computer.jpg" alt=""></li>
</ul>
<!-- Add Pagination -->
<li class="swiper-pagination swiper-part5" id="part5" ></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="img/ctr_hand.png" alt="" class="ctr_hand">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="img/slide-ctr-photo.png" alt="" 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 >实拍效果图</p></li>
<li class="photo-person-wrap-1">
<img src="img/photo-person.png" alt="" id="photo-person1">
</li>
</ul>
</li>
<li class="swiper-slide">
<img src="img/slide-ctr-music.jpg" alt="" 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 >Android 及 iOS版⽀持的⾳乐应⽤</p></li>
<li class="photo-person-wrap"><img src="img/wangyi.png" alt="" id="photo-person2"></li>
</ul>
</li>
<li class="swiper-slide">
<img src="img/slide-ctr-ppt.jpg" alt="" class="slide-ctr-photo">
<ul class="part20-ul1">
<li><h1>遥控PPT</h1></li>
<li><h1>放胆⾃信</h1></li>
js实现轮播图最简代码<li><p>给你⽆限的空间掌控演讲，挥洒风采。能够⽀持Mac电脑以及Windows 8.1及以上⾃带蓝⽛4.0的电脑</p></li>
<li><p >Mac及Windows上⽀持的幻灯⽚App</p></li>
<li class="photo-person-wrap"><img src="img/ppt-logo.png" alt="" id="photo-person3"></li>
</ul>
</li>
</ul>
<!-- Add Pagination -->
<li class="swiper-pagination swiper-part20" ></li>
<!-- Add Arrows -->
<li class="swiper-button-next" ></li>
<li class="swiper-button-prev" ></li>
</section>
<script src="js/jquery-1.12.1.min.js"></script>
<script src="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 = "img/wallet.png";
var imgs1 = new Image();
imgs1.src = "img/pet.png";
var imgs2 = new Image();
imgs2.src = "img/key.png";
var imgs3 = new Image();
imgs3.src = "img/bag.png";
var imgs4 = new Image();
imgs4.src = "img/camera.png";
var imgs5 = new Image();
imgs5.src = "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="img/cameraBlue.png";
var imgs1 = new Image();
imgs1.src="img/musicBlue.png";
var imgs2 = new Image();
imgs2.src="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 源代码下载地址：www.swiper/download/index.html#file7
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论