第一个自己写的banner动画

摘要：动画实现滚动文字描述切换的宽度自动切换的时间默认是否自动播放返回值，作为清除时延的标志位文字介

 
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-------------------------------*/