前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

自动轮播图,带左右切换

jq
 

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>


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