自动轮播图，带左右切换

 

DEMO:http://jsbin.com/acudel/2/edit

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript"> $(document).ready(function(){ var pro_list=$(".pro_list");//图片滚动块 var pro_width=0; var index;//索引初始值 var total_width=$(".pro_list li").width()*($(".pro_list li").length-1);//最大位移坐标值等于图片块的宽度乘以图片总是减1 $(".right").click(function(){ if(!pro_list.is(":animated")){ if(pro_width==total_width){ return false; }else{ pro_list.animate({left:"-=" 800},800); pro_width =800; index=$(".item a.click").index(); index ; $(".item a").eq(index).addClass("click").siblings().removeClass("click");//让选择的索引值加1并且添加样式，它的同辈元素移除此样式 } } });//向右位移或者是下一张 $(".left").click(function(){ if(!pro_list.is(":animated")){ if(pro_width==0){ return false; }else{ pro_list.animate({left:" =" 800},800); pro_width-=800; index=$(".item a.click").index(); index--; $(".item a").eq(index).addClass("click").siblings().removeClass("click");//让选择的索引值减1并且添加样式，他的同辈元素移除该样式 } } });//向左位移或者上一张 var item_a=$(".item a"); item_a.click(function(){ $(this).addClass("click").siblings().removeClass("click"); pro_width=$(".pro_list li").width()*($(this).index());//图片位移的单位 pro_list.animate({left:"-" pro_width},800); n=$(this).index(); }); //索引切换图片 n=0; count=$(".pro_list li").length; t = setInterval(function(){ n=n >=(count-1)?0: n; $(".item a").eq(n).trigger('click'); },4000);//执行定义好的函数 }); </script>

• 
• 
• 

1 2 3

<< >>

转载请注明：前端录»自动轮播图，带左右切换

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=21-37-2"></script>