1、html部分
<div class="carousel"> <div id="slider" class="swipe" style="visibility:visible;"> <div class="swipe-wrap"> <figure> <div class="face faceInner"> <img src="img/find/swip1.jpg"/> </div> </figure> <figure> <div class="face faceInner"> <img src="img/find/swip1.jpg" /> </div> </figure> <figure> <div class="face faceInner"> <img src="img/find/swip1.jpg"/> </div> </figure> <figure> <div class="face faceInner"> <img src="img/find/swip1.jpg"/> </div> </figure> </div> <!--圆点--> <nav> <ul id="position"> <li class="on"></li> <li></li> <li></li> <li></li> </ul> </nav> </div> </div>
2、js部分
var slider = Swipe(document.getElementById(‘slider‘), { auto: 3000,//轮播时间 continuous: true,//是否连续播放 disableScroll: false, callback: function(pos) { var i = bullets.length; while (i--) { bullets[i].className = ‘ ‘; } bullets[pos].className = ‘on‘; } }); var bullets = document.getElementById(‘position‘).getElementsByTagName(‘li‘);
3、css部分
.center { position: relative; width: 100%; top: 1.28rem; } .center .carousel { width: 100%; height: 3rem; background: red; overflow: hidden; } .center .carousel img { width: 100%; height: 3rem; }
4、sass部分
.center{ position:relative; width: 100%; top:1.28rem; .carousel { width: 100%; height: 3rem; background: red; overflow: hidden; img{ width: 100%; height: 3rem; } } }
原文:http://www.cnblogs.com/qing1304197382/p/5541833.html