20150627原生js轮播器

html====

<div id="banner">
    <div id="left" class="left"><span></span></div>
    <div id="right" class="right"><span></span></div>
    <ul class="pic">
        <li><img src="images/1.jpg" alt=""/></li>
        <li><img src="images/2.jpg" alt=""/></li>
        <li><img src="images/3.jpg" alt=""/></li>
    </ul>
    <div class="dot">
        <span class="active"></span>
        <span></span>
        <span></span>
    </div>
</div>

css=====

*{
    margin: 0;
    padding: 0;
}
li{list-style: none}
#banner {
    width: 600px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
#banner .left {
    width: 60px;
    height: inherit;
    position: absolute;
    left: 0;
    z-index: 3;
    opacity: 0.3;
}
#banner .left span {
    width: 60px;
    height: 70px;
    position: absolute;
    top: 150px;
    left: 0;
    display: block;
    background: url(../images/arrow.jpg) no-repeat 0 -10px;
    z-index: 4;
}
#banner .right {
    width: 60px;
    height: inherit;
    position: absolute;
    right: 0;
    z-index: 3;
    opacity: 0.3;
    filter: alpha(opacity=30);
}
#banner .right span {
    width: 60px;
    height: 70px;
    position: absolute;
    top: 150px;
    right: 0;
    display: block;
    background: url(../images/arrow.jpg) no-repeat 0 -95px;
}
#banner .pic {
    height: 300px;
    position: absolute;
    left: 0;
    z-index: 2;
}
#banner .pic li{
    width: 600px;
    height: 300px;
    float: left;
}
#banner .dot {
    position: absolute;
    bottom: 0px;
    left: 280px;
    width: 100px;
    height: 20px;
    z-index: 3;
}
#banner .dot span {
    margin-left: 15px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display: block;
    float: left;
    background:#ccc;
}
#banner .dot span.active{
    background: red;
}



js========

(function () {
    var ulpic=document.getElementsByTagName(‘ul‘)[0];
    var lipic=ulpic.getElementsByTagName(‘li‘);
    ulpic.style.width=parseInt(css(lipic[0],‘width‘))*lipic.length+‘px‘;
    var dot=document.getElementsByClassName(‘dot‘)[0];
    var span=dot.getElementsByTagName(‘span‘);
    var left=document.getElementById(‘left‘);
    var right=document.getElementById(‘right‘);
    var iNow=0;
    var timer=null;
    left.onmouseover=function(){
        fade(this,100);
    }
    left.onmouseout=function(){
        fade(this,30);
    }
    right.onmouseover=function(){
        fade(this,100);
    }
    right.onmouseout=function(){
        fade(this,30);
    }
    left.onclick=function(){
        iNow=(iNow <= 0)?2:--iNow;
        banner();
    }
    right.onclick=function(){
        iNow=(iNow >=2)?0:++iNow;
        banner();
    }
    for(var i= 0,len=span.length;i<len;i++){
        span[i].index=i;
        span[i].onclick=function(){
            iNow=this.index;
            banner();
        }
    }
    function move(obj,json) {
        obj.timer&& clearInterval(obj.timer);
        obj.timer=setInterval(function () {
            var stop=true;
            for(var i in json){
                var tar=json[i];
                var cur=parseInt(css(obj,i));
                var speed=(tar-cur)/7;
                speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
                if(i==‘zIndex‘){
                    obj.style[i]=tar;
                } else{
                    if(cur!=tar){
                        stop=false;
                        obj.style[i]=cur+speed+‘px‘;
                    }
                }
            }
            if(stop){
                clearInterval(obj.timer);
                obj.timer=null;
            }
        },40);
    }
    function fade(obj,tar){
        obj.timer&& clearInterval(obj.timer);
        obj.timer=setInterval(function () {
            var cur=css(obj,‘opacity‘)*100;
            var speed=(tar-cur)/7;
            if(cur!=tar){
                obj.style.opacity=(cur+speed)/100;
                obj.style.filter=‘alpha(opacity=‘+(cur+speed)+‘)‘;
            }else{
                clearInterval(obj.timer);
                obj.timer=null;
            }
        },50)
    }
    function css(obj,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(obj,false)[attr];
        }else{
            return obj.currentStyle[attr];
        }

    }
    function banner(){
        move(ulpic,{‘left‘:-iNow*parseInt(css(lipic[0],‘width‘))});
        for(var i= 0;i<span.length;i++){
            span[i].className=span[i].className.replace(/active/g,‘‘);
        }
        span[iNow].className+=‘ ‘+‘active‘;
    }
    setInterval(function () {
        iNow=(iNow>=2)?0:++iNow;
        banner();
    },3000)
})()