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)
})()

 

基于JQ的调用参数轮播


function Banner(config){
    this.container=$(config.container);
    this.config=config;
    var c=config.container;
    this.prev=$(c+config.prev);
    this.next=$(c+config.next);
    this.pic=$(c+config.pic);
    this.picList=$(c+config.picList);
    this.picWidth=config.picWidth;
    this.btn=$(c+config.btn);
    this.btnList=$(c+config.btnList);
    this.index=0;
    this.timer=null;
    this.auto=config.auto;
    this.interval=config.interval;
    this.init();

}


/*click next button*/
Banner.prototype.nextMove= function () {
    var self=this;
    if(self.index==self.btnList.length-1){
        if(!self.pic.is(':animated')){
            self.index=0;
            this.showBtn(0);
            this.pic.animate({
                "left":-self.picWidth*4+'px'
            }, function () {
                self.pic.css("left",-self.picWidth+'px');
            })
        }
    }else{
        if(!self.pic.is(':animated')){
            self.index++;
            self.showBtn(self.index);
            self.pic.animate({
                "left":-(self.index+1)*self.picWidth+'px'
            })
        }
    }
};

/*click prev button*/

Banner.prototype.prevMove = function () {
    var self = this;
    if (self.index == 0) {
        if (!self.pic.is(':animated')) {
            self.index = self.btnList.length - 1;
            self.showBtn(self.btnList.length - 1);
            self.pic.animate({
                "left": 0
            }, function () {
                self.pic.css("left", -self.picWidth*self.btnList.length + 'px');
            })
        }

    } else {
        if (!self.pic.is(':animated')){
            console.log(self.index);
            self.index--;
            self.showBtn(self.index);
            self.pic.animate({"left": -(self.index+1) * self.picWidth + 'px'});
        }
    }
}

/*show buttons*/
Banner.prototype.showBtn = function (index) {
    this.btnList.removeClass('act');
    this.btnList.eq(index).addClass('act');
};


/*autoplay */
Banner.prototype.autoPlay= function () {
    var self=this;
    self.timer = setInterval(function () {
        self.nextMove();
    }, self.interval);
};

/*init part*/
Banner.prototype.init= function () {
  /*clone part*/
    var firstPic=this.picList.eq(0).clone(true,true);
    var lastPic=this.picList.eq(this.picList.length-1).clone(true,true);
    firstPic.appendTo(this.pic);
    lastPic.prependTo(this.pic);
    this.pic.css("left",-this.picWidth+'px');
    /* prev & next clickEvent*/
    var self=this;
    this.prev.on('click', function () {
        self.prevMove();
    });
    this.next.on('click', function () {
        self.nextMove();
    });

    /*autoPlay*/
    if(this.auto){
        this.autoPlay();
    }
    /*stopPlay*/
    self.pic.on('mouseover',function(){
        clearInterval(self.timer);
    }).on('mouseout', function () {
        self.autoPlay();
    })


};




/*创建一个轮播*/
new Banner({
    "container": ".banner",  
    "prev": " .prev",
    "next": " .next",
    "pic": " .pic",
    "picWidth": 1000,
    "picList": " .pic li",
    "btn": " .btn",
    "btnList": " .btn li",
    "interval":3000,
    "auto":true
});


css
*{margin:0;padding:0;}
li{list-style:none;}
.banner{position:relative;width:1000px;height:400px;margin:0 auto;overflow:hidden;}
.banner .arrow{position:absolute;z-index:2;top:45%;width:40px;height:40px;background:#000;opacity:0.5;filter:alpha(opacity=50);}
.banner .prev{left:0;}
.banner .next{right:0;}
.banner .pic{position:absolute;z-index:1;left:0;top:0;width:9999px;height:400px;}
.banner .pic li{float:left;width:1000px;height:400px;}
.banner .btn{position:absolute;z-index:2;bottom:10px;left:45%;}
.banner .btn li{float:left;width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-left:10px;text-indent:-9999px;background:grey;}
.banner .btn .act{background:red;}


html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/demo.css"/>
</head>
<body>



<div class="banner">
    <div class="prev arrow"></div>
    <div class="next arrow"></div>
    <ul class="pic">
        <li><img width="1000" height="400" src="images/ad2.png" alt=""/></li>
        <li><img width="1000" height="400" src="images/ad3.png" alt=""/></li>
        <li><img width="1000" height="400" src="images/ad4.png" alt=""/></li>
    </ul>
    <ul class="btn">
        <li class="act">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>


</body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/demo.js"></script>