jQuery手指滑动轮播效果

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script><script type="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: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 class="main_visual">  <div class="flicking_con">    <a href="#">1</a>    <a href="#">2</a>    <a href="#">3</a>    <a href="#">4</a>    <a href="#">5</a>  </div>  <div class="main_image">    <ul>      <li><span class="img_3"></span></li>      <li><span class="img_4"></span></li>      <li><span class="img_1"></span></li>      <li><span class="img_2"></span></li>      <li><span class="img_5"></span></li>    </ul>    <a href="javascript:;" id="btn_prev"></a>    <a href="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_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);  });});