移動端和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>
這樣一個簡單的輪播就實現啦，記得將圖片地址換掉哦，原生的輪播，有時間可以寫起來。。