备注 ： 需要引入对应js
下面给大家分享下实现代码，具体代码如下所示：
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.event.drag-1.5.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.touchSlider.js"></script> // style 代码 @charset "utf-8"; *{margin:0;padding:0;list-style:none;border:0;} body{width:100%;margin:0 auto;overflow:hidden} /* main_image */ .main_visual{height:422px;border-top:1px solid #d7d7d7;overflow:hidden;position:relative;} .main_image{height:422px;overflow:hidden;position:relative;} .main_image ul{width:9999px;height:422px;overflow:hidden;position:absolute;top:0;left:0} .main_image li{float:left;width:100%;height:422px;} .main_image li span{display:block;width:100%;height:422px} .main_image li a{display:block;width:100%;height:422px} .main_image li .img_1{background:url('../images/img_main_1.jpg') center top no-repeat} .main_image li .img_2{background:url('../images/img_main_2.jpg') center top no-repeat} .main_image li .img_3{background:url('../images/img_main_3.jpg') center top no-repeat} .main_image li .img_4{background:url('../images/img_main_4.jpg') center top no-repeat} .main_image li .img_5{background:url('../images/img_main_5.jpg') center top no-repeat} div.flicking_con{position:absolute;top:360px;left:50%;z-index:999;width:300px;height:21px;margin:0 0 0 -50px;} div.flicking_con a{float:left;width:21px;height:21px;margin:0;padding:0;background:url('../images/btn_main_img.png') 0 0 no-repeat;display:block;text-indent:-1000px} div.flicking_con a.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-repeat left top;left:100px;} #btn_next{background:url(../images/hover_right.png) no-repeat right top;right:100px;} // html 代码 <div> <div> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div> <div> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> <a href="javascript:;"></a> <a href="javascript:;"></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_con a"), counter : function (e){ $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on"); } }); $(".main_image").bind("mousedown", function() { $dragBln = false; }); $(".main_image").bind("dragstart", function() { $dragBln = true; }); $(".main_image a").click(function(){ if($dragBln) { return false; } }); 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手指滑动轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: