图片轮播

//html部分
<div class="banner float_clear" id="banner">
    <div class="active transition" name="1" data-num="1">
        <img src="../images/banner.png" alt=""/>
    </div>
    <div class="transition" name="0" data-num="2">
        <img src="../images/banner2.png" alt=""/>
    </div>
    <div class="active transition" name="0" data-num="3">
        <img src="../images/banner.png" alt=""/>
    </div>
    <div class="active transition" name="0" data-num="4">
        <img src="../images/banner2.png" alt=""/>
    </div>
    <ul class="banner-btn" id="banner-btn">
        <li class="active" data-num="1"></li>
        <li data-num="2"></li>
        <li data-num="3"></li>
        <li data-num="4"></li>
    </ul>
</div>
//css部分
//共用部分
body {
    width:1024px;
    margin: 0 auto;
font: normal 100% "microsoft yahei", Arial, Helvetica, sans-serif;
color: #333;
    font-size: 14px;
    padding:0;
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
}
div,ul,a,li,img,p{
box-sizing:border-box;
}
ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {
    margin:0;
    padding:0;
    border:none;
    list-style:none;
}
input {border:none;}
.lf   {float:left;}
.rt  {float:right;}
.clear  {clear:both;}


a{
    text-decoration:none;
}
/*轮播图片*/
.banner-btn{
    position:absolute;
    bottom:30px;
    left:50%;
    margin-left:-22px;


}
.banner-btn li{
    float: left;
    width:15px;
    height:15px;
    border-radius: 50%;
    background:#ffffff;
    opacity:1;
    margin-left:15px;
}
.banner-btn li:hover,.banner .banner-btn li.active{
    cursor:pointer;
    background:#D7001F;
}
.banner{
    width:100%;
    height:296px;
    position:relative;
    overflow: hidden;
}
.banner>div{
    width:100%;
    height:296px;
    transform: scale(1.5);
    position:absolute;
    top:0;
    left:0;
    opacity: 0;
}
.banner>div.active{
    opacity: 1;
    transform: scale(1);
-webkit-animation: imagechange 4s linear 0.5s;
    -o-animation: imagechange 4s linear 0.5s;
    animation: imagechange 4s linear 0.5s;
}
.banner>div>img{
    width:100%;
    height:100%;
}
.transition{
    -webkit-transition: all linear 0.5s ;
    -moz-transition: all linear 0.5s ;
    -ms-transition: all linear 0.5s ;
    -o-transition: all linear 0.5s ;
    transition: all linear 0.5s ;
}
@-webkit-keyframes imagechange {
    0%{-webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);}
    50%{
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);}
    100%{
        -webkit-transform:scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);}
}


@-ms-keyframes imagechange {
    0%{-webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);}
    50%{
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);}
    100%{
        -webkit-transform:scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);}
}
//js部分
/*轮播*/
;$(function(){
    RotateImg.init();
});
var RotateImg={
    WAIT:5000,//轮播间隔时间
    timer:null,//序号
shw_num:0,//当前显示的图片序号
All_num:null,//图片总数量


    init:function(){
this.All_num = $("#banner-btn li").length;
        this.moveStep();
        $("#banner-btn").on("mouseenter","li",function(e){
            var tar= e.target;
            clearTimeout(this.timer);
            this.timer=null;
            var m = tar.getAttribute("data-num");
            $("#banner-btn li").removeClass("active");
            $(tar).addClass("active");
            $("#banner div").removeClass("active").attr("name",'1');
            $("#banner [data-num="+m+"]").addClass("active").attr("name",'0');


        }.bind(this));
        $("#banner-btn").on("mouseleave","li",function(e){
this.shw_num = parseFloat($("#banner>div.active").attr("data-num"));

            this.autoMove();
        }.bind(this));
    },
    autoMove:function(){

        this.timer=setTimeout(function(){


            this.moveStep();


        }.bind(this),this.WAIT);
    },
    moveStep:function(){

        var hid=$("#banner>div[name=0]");//要隐藏的图片
var n = this.shw_num+1;
if(n>this.All_num){
this.shw_num = 0;
n = 1;
}
var shw=$("#banner>div[data-num="+n+"]");//要显示的图片
$("#banner div").removeClass("active").attr("name",'1');


        shw.addClass("active").attr("name",0);


        hid.removeClass("active").attr("name",1);
        
        $("#banner-btn li").removeClass("active");
        $("#banner-btn [data-num="+n+"]").addClass("active");
        this.autoMove();
this.shw_num++;
    }
};