摘要：動畫實現滾動文字描述切換的寬度自動切換的時間默認是否自動播放返回值，作為清除時延的標志位文字介

 
transition:height .2s ease-in ;

/------------------------------動畫實現滾動-------------------------------/

var excursion = -420 ; //文字描述切換的寬度
var btn = $("#circle-btn-wrapper .circle-btn");
var all_index = btn.find(".circle-btn-active").index();
var timer = 4000; //自動切換的時間ms,默認4s
var autoPaly = true; //是否自動播放
var inter; //setInterval返回值，作為清除時延的標志位
//console.log(all_index);

//文字介紹切換函數
function introduce_cross(index){
    $(".app-introduce-cross").animate({
        left: (excursion * index) + "px" ,
    },600);
}

//手機畫面切換函數
function iphone_show(dex){
    $(".iphone-down .filter-img").each(function(index) {
        //console.log(dex);
        if(index != dex){
            $(this).fadeOut(0);
        }
        else{
            $(this).fadeIn(1000);
        }

    });

    $(".iphone-up .filter-imgS").each(function(i) {
        //console.log(dex);
        if(i != dex){
            $(this).fadeOut(0);
        }
        else{
            $(this).fadeIn(1000);
        }

    });
};

//小圓點切換函數
function circle_btn(dex){
    $("#circle-btn-wrapper i").each(function(t) {
        //console.log(dex);
        if(t != dex){
            $(this).removeClass("circle-btn-active");
        }
        else{
            $(this).addClass("circle-btn-active");
        }

    });
}

//控制箭頭的顯示和隱藏
function arrow_toogle(index){
    if(index == 0){
        $(".arrow-left-btn").fadeOut(100);
        $(".arrow-right-btn").fadeIn(100);
    }
    else if(index == 2){
        $(".arrow-right-btn").fadeOut(100);
        $(".arrow-left-btn").fadeIn(100);
    }
    else{
        $(".arrow-right-btn").fadeIn(100);
        $(".arrow-left-btn").fadeIn(100);
    }

}

//左側切換按鈕點擊事件
$(".arrow-left-btn").click(function(){
    if(all_index > 0){
        all_index--;
        introduce_cross(all_index);
        iphone_show(all_index);
        circle_btn(all_index);
        arrow_toogle(all_index);
    }
});
//右側切換按鈕點擊事件
$(".arrow-right-btn").click(function(){
    if(all_index < 2){
        if(all_index == -1){
            all_index = all_index + 2 ;
        }
        else{
            all_index++;
        }
        //console.log(all_index);
        introduce_cross(all_index);
        iphone_show(all_index);
        circle_btn(all_index);
        arrow_toogle(all_index);
    }
});
//小圓點-點擊事件
btn.click(function() {
    all_index = $(this).index();
    //console.log(dex);
    $(this).addClass("circle-btn-active");
    btn.not(this).removeClass("circle-btn-active");

    introduce_cross(all_index);
    iphone_show(all_index);
    arrow_toogle(all_index);

});


/*
$(window).focus(function(){setTimeout(autoChange,timer);});
function autoChange()
{
    changeScroll();
    setTimeout(autoChange,timer);
}
*/

//自動滾動初始化
Is_autoPlay(autoPaly);

//手動切換時，終止自動播放;手動停止后，回到自動切換
$(".arrow-btn,.circle-btn").hover(function(){
    autoPaly = false;
    Is_autoPlay(autoPaly);

},function(){
    autoPaly = true;
    Is_autoPlay(autoPaly);
});

//判斷是否自動播放
function Is_autoPlay(t){
    if(t){
        inter = setInterval(changeScroll,timer);
    }
    else{
        clearInterval(inter);
    }
}

//自動播放函數
function changeScroll(){
    if(all_index < 2){
        if(all_index == -1){
            all_index = all_index + 2 ;
        }
        else{
            all_index += 1;
        }   
    }
    else{
        all_index = 0;
    }
    //console.log(all_index);

    introduce_cross(all_index);
    iphone_show(all_index);
    circle_btn(all_index);
    arrow_toogle(all_index);
}


/*------------------------------動畫實現滾動  end-------------------------------*/