第一個本身寫的banner動畫

<link rel="stylesheet" media="screen and (max-width:800px)" href="css/small.css" type="text/css" /><!--width<=770px style--> 
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-------------------------------*/