$(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)
//  });
});