第一个自己写的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-------------------------------*/