$(function(){ var img_length=$(".ct-img-big").children().length; var smallhtml=""; for(var i=1;i<=img_length;i++){ smallhtml+="<li></li>" } $(".ct-img-small").html(smallhtml); var ctwidth=$('.ct-img-small').width(); $('.ct-img-small').css({marginLeft:-ctwidth/2}); $(".ct-img-small").children().eq(0).addClass("active"); var $imgBig=$('.ct-img-big'), $btnNext=$('.btn-next'), $btnPre=$('.btn-pre'), $CT = $('.carouselt'), $imgSmall=$('.ct-img-small'); var $imgWidth=$imgBig.find('li').width();//获取图片的宽度; var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度; // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后; var $firstImg=$imgBig.find('li').first(), $lastImg=$imgBig.find('li').last(); $imgBig.prepend($lastImg.clone()); $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度 $imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数 $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区 var pageIndex = 0 ; //img的下标; var isAnimate = false//防止重复点击 上锁 $btnNext.on('click',function(e){ e.preventDefault(); playNext(); setTimeout(function(){ },1500) }); $btnPre.on('click',function(e){ e.preventDefault(); playPre(); setTimeout(function(){ },1500) }); $imgSmall.find('li').on('click',function(){ var smallIdx= $(this).index(); if(smallIdx>pageIndex){ playNext(smallIdx-pageIndex) } else if(smallIdx<pageIndex){ playPre(pageIndex-smallIdx) } }); function playNext(n){ var idx = n ||1; if(isAnimate) return; isAnimate = true; $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},1500,function(){ //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0; pageIndex = pageIndex+idx; if( pageIndex ===$imgLength ){ $imgBig.css({'left':'-'+$imgWidth+'px'}) pageIndex = 0; } isAnimate = false; smallImg() }) } function playPre(n){ var idx = n ||1; if(isAnimate) return; isAnimate = true; $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},1500,function(){ pageIndex=pageIndex-idx; if(pageIndex<0){ $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'}); pageIndex = $imgLength-1; } isAnimate = false; smallImg() }) } //设置小图的class function smallImg(){ $imgSmall.children() .removeClass('active') .eq(pageIndex) .addClass('active') } //自动轮播 鼠标进入鼠标离开 // var timer =setInterval(function(){ // playNext() // },4000); // $CT.hover(function(){ // clearInterval(timer) // },function(){ // timer =setInterval( function(){ // playNext() // },4000) // }); });