移动端和p c端经常会遇到写轮播图的情况，这里只是简单的说一下swiper插件的简单用法（移动端为例）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>Title</title>
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
<script>
document.querySelector("html").style.fontSize = document.documentElement.clientWidth/375*50+"px";
</script>
</head>
<body>
<div class="detail_pic">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/1.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/2.png" alt=""></div>
<div class="swiper-slide"><img src="img/3.png" alt=""></div>
<div class="swiper-slide"><img src="img/4.png" alt=""></div>
<div class="swiper-slide"><img src="img/5.png" alt=""></div>
<div class="swiper-slide"><img src="img/6.png" alt=""></div>
<div class="swiper-slide"><img src="img/7.png" alt=""></div>
</div>
</div>
</div>
<script src="js/zepto.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
//轮播图
$(document).ready(function () {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', //轮播方向
autoplay:2000, //自动轮播
loop: true, //循环
autoplayDisableOnInteraction : false //用户操作后不停止
});
});
</script>
</body>
</html>
这样一个简单的轮播就实现啦，记得将图片地址换掉哦，原生的轮播，有时间可以写起来。。
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
