$(function(){ var img_length=$(".ct-img-big").children().length; var smallhtml=""; for(var i=1;i<=img_length;i++){ smallhtml+="
" } $(".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