<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div></div>
<div></div>
<div></div>
</div>
</div>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
window.mySwipe = Swipe(document.getElementById('slider'),opt);
<div class="banner">
<div id="slider" class="swipe">
<ul class="swipe-wrap">
<li>
<a href="javascript:void(0)">
<img src="img/1.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/2.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/3.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/4.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/5.jpg">
</a>
</li>
</ul>
<ul class="slide-trigger">
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
.banner {
width: 100%;
position: relative;
}
.banner .swipe {
overflow: hidden;
position: relative;
}
.banner .swipe-wrap {
overflow: hidden;
position: relative;
list-style: none;
}
.banner .swipe-wrap li {
float: left;
position: relative;
}
.banner img {
width: 100%;
vertical-align: middle;
}
.banner .slide-trigger {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 10;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
list-style: none;
}
.banner .slide-trigger li {
width: 10px;
height: 10px;
background: #FFF;
margin: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.banner .slide-trigger .cur {
background: #2fc7c9;
}
var slider = $('#slider');
slider.find(".slide-trigger").find("li").eq(0).addClass("cur");
window.mySwipe = new Swipe(document.getElementById('slider'), {
speed: 400,
auto: 3000,
callback: function(index, elem) {
slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");
}
});
$(‘body').swipeUp(function(e){
alert(‘swipeUp');//偶尔有效
})
$(‘body').swipeDown(function(e){
alert(‘swipeDown');//偶尔有效
})
$(‘body').tap(function(){
alert(‘tap');//ok
})
$(‘body').swipeLeft(function(){
alert(‘swipeLeft');//ok
})
$(‘body').swipeRight(function(){
alert(‘swipeRight');//ok
})
document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有