jQuery手指滑动轮播效果
备注：需要引入对应js
下面给大家分享下实现代码，具体代码如下所示：
<scripttype="text/javascript"src="js/jquery-1.7.1.min.js"></script>
<scripttype="text/javascript"src="js/jquery.event.drag-1.5.min.js"></script>
<scripttype="text/javascript"src="js/jquery.touchSlider.js"></script>
//style代码
@charset"utf-8";
*{margin:0;padding:0;list-style:none;border:0;}
body{width:100%;margin:0auto;overflow:hidden}
/*main_image*/
.main_visual{height:422px;border-top:1pxsolid#d7d7d7;overflow:hidden;position:relative;}
.main_image{height:422px;overflow:hidden;position:relative;}
.main_imageul{width:9999px;height:422px;overflow:hidden;position:absolute;top:0;left:0}
.main_imageli{float:left;width:100%;height:422px;}
.main_imagelispan{display:block;width:100%;height:422px}
.main_imagelia{display:block;width:100%;height:422px}
.main_imageli.img_1{background:url('../images/img_main_1.jpg')centertopno-repeat}
.main_imageli.img_2{background:url('../images/img_main_2.jpg')centertopno-repeat}
.main_imageli.img_3{background:url('../images/img_main_3.jpg')centertopno-repeat}
.main_imageli.img_4{background:url('../images/img_main_4.jpg')centertopno-repeat}
.main_imageli.img_5{background:url('../images/img_main_5.jpg')centertopno-repeat}
div.flicking_con{position:absolute;top:360px;left:50%;z-index:999;width:300px;height:21px;margin:000-50px;}
div.flicking_cona{float:left;width:21px;height:21px;margin:0;padding:0;background:url('../images/btn_main_img.png')00no-repeat;display:block;text-indent:-1000px}
div.flicking_cona.on{background-position:0-21px}
#btn_prev,#btn_next{z-index:11111;position:absolute;display:block;width:73px!important;height:74px!important;top:50%;margin-top:-37px;display:none;}
#btn_prev{background:url(../images/hover_left.png)no-repeatlefttop;left:100px;}
#btn_next{background:url(../images/hover_right.png)no-repeatrighttop;right:100px;}
//html代码
<divclass="main_visual">
<divclass="flicking_con">
<ahref="#">1</a>
<ahref="#">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
</div>
<divclass="main_image">
<ul>
<li><spanclass="img_3"></span></li>
<li><spanclass="img_4"></span></li>
<li><spanclass="img_1"></span></li>
<li><spanclass="img_2"></span></li>
<li><spanclass="img_5"></span></li>
</ul>
<ahref="javascript:;"id="btn_prev"></a>
<ahref="javascript:;"id="btn_next"></a>
</div>
</div>
//jQuery代码
$(document).ready(function(){
$(".main_visual").hover(function(){
$("#btn_prev,#btn_next").fadeIn()
},function(){
$("#btn_prev,#btn_next").fadeOut()
});
$dragBln=false;
$(".main_image").touchSlider({
flexible:true,
speed:200,
btn_prev:$("#btn_prev"),
btn_next:$("#btn_next"),
paging:$(".flicking_cona"),
counter:function(e){
$(".flicking_cona").removeClass("on").eq(e.current-1).addClass("on");
}
});
$(".main_image").bind("mousedown",function(){
$dragBln=false;
});
$(".main_image").bind("dragstart",function(){
$dragBln=true;
});
$(".main_imagea").click(function(){
if($dragBln){
returnfalse;
}
});
timer=setInterval(function(){
$("#btn_next").click();
},5000);
$(".main_visual").hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
$("#btn_next").click();
},5000);
});
$(".main_image").bind("touchstart",function(){
clearInterval(timer);
}).bind("touchend",function(){
timer=setInterval(function(){
$("#btn_next").click();
},5000);
});
});
以上所述是小编给大家介绍的jQuery手指滑动轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！