标签:
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