原生JS实现

html:

            
                     
                                 
     
        
      
            
       
                
        
                
        
                
        
                
        
                
        
                
        
                            
       
        
      
        
      
                   
      
        
      
            
       
        <
       
            
       
        >
       
        
      
    
     
    

css:

#rotateImg{
       width: 400px;    height: 220px;    margin:100px auto;    position: relative;    font:12px helvetica;    overflow: hidden;}img{
       width: 400px;    height: 220px;}#rotateImg>ul{
       position: absolute;    bottom:15px;    left:50%;    margin-left:-60px;}#rotateImg>ul>li{
       float: left;    /*list-style: none;*/    cursor: pointer;    width: 16px;    height: 16px;    margin-right:10px;    text-align: center;    line-height: 16px;    border-radius: 8px;    background: #fff;}#rotateImg>ul>li.light{
       background:red;    color:#fff;}#imgcontainer{
       width: 100%;}#imgcontainer>ul{
       width: 1000%;    height: 220px;    list-style: none;    position: absolute;}#imgcontainer>ul li{
       float:left;}.arrows{
       position: absolute;    width: 100%;    height: 40px;    top:50%;    margin-top:-20px;    display: none;    color: red;}.arrows .prev, .arrows .next{
       height: 40px;    width: 40px;    line-height: 40px;    text-align: center;    font:600 30px/40px "simsun";    background:rgba(0,0,0,0.2);    cursor: pointer;}.arrows .prev{
       float:left;   }.arrows .next{
       float:right;    }

 

javascript:

window.οnlοad=function(){    move("rotateImg");    }function animation(obj,target){    var speed;    clearInterval(obj.timer);    obj.timer=setInterval(function(){        speed = (target - obj.offsetLeft)/10;        speed = (speed>0?Math.ceil(speed):Math.floor(speed));        obj.style.left = obj.offsetLeft+speed+"px";        if(obj.offsetLeft==target){            clearInterval(obj.timer);        }    }, 20)}function move(id){    var rotateImg = document.getElementById(id);    var imgUl = rotateImg.children[0].children[0];    var imgList=imgUl.children;    var dotUl = rotateImg.children[1];    var arrows = rotateImg.children[2];    var prev = arrows.children[0];    var next = arrows.children[1];    var width = rotateImg.offsetWidth;    var num = 0;    //clone first image    var newLiFirstImgClone = imgUl.children[0].cloneNode(true);    imgUl.appendChild(newLiFirstImgClone);              //1、create dot according to number of images and append it     for(var i=1;i

 

面向对象的javascript实现：

window.onload = function() {    var ar = ['img/wallPaper/v2-9f779d41608f6b4b62c75b597dde9f1e_b.jpg', 'img/wallPaper/starks.jpg'];    //    new Move('img/wallPaper/v2-9f779d41608f6b4b62c75b597dde9f1e_b.jpg','img/wallPaper/starks.jpg','img/wallPaper/mygit.PNG');    new Move(ar);}function animation(obj, target) {    var speed;    clearInterval(obj.timer);    obj.timer = setInterval(function() {        speed = (target - obj.offsetLeft) / 10;        speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));        obj.style.left = obj.offsetLeft + speed + "px";        if(obj.offsetLeft == target) {            clearInterval(obj.timer);        }    }, 20)}function Move() {    this.imgArr = [];    if(Array.isArray(arguments[0])) {        console.log('is array');        this.imgArr = arguments[0];    } else {        if(arguments.length <= 1) {            alert('请指定至少两张图片');        }        for(var a = 0; a < arguments.length; a++) {            this.imgArr.push(arguments[a]);        }    }    this.makeDiv();    var rotateImg = document.getElementById('rotateImg');    this.rotateImg = rotateImg;    this.imgUl = rotateImg.children[0].children[0];    this.imgList = rotateImg.children[0].children[0].children;    this.dotUl = rotateImg.children[1];    this.arrows = rotateImg.children[2];    this.prev = this.arrows.children[0];    this.next = this.arrows.children[1];    this.width = rotateImg.offsetWidth;    this.num = 0;    //clone first image    var newLiFirstImgClone = this.imgUl.children[0].cloneNode(true);    this.imgUl.appendChild(newLiFirstImgClone);    //1、create dot according to number of images and append it     for(var i = 1; i < this.imgList.length; i++) {        var newDot = document.createElement("li");        newDot.innerHTML = i;        this.dotUl.appendChild(newDot);    }    var _this = this;    this.dotLiArray = this.dotUl.children;    this.light(this.num);    //2 click dot,transform image and light dot    for(var k = 0; k < this.dotLiArray.length; k++) {        this.dotLiArray[k].index = k;        this.dotLiArray[k].onclick = function() {            _this.num = this.index;            _this.light(_this.num);            animation(_this.imgUl, -_this.num * _this.width);        }    }    //3 next    this.next.onclick = function() {        _this.autoplay();    }    //自动播放    rotateImg.timer = setInterval(function() {        _this.autoplay(this.num);    }, 1000);    //4、previous    this.prev.onclick = function() {        _this.movePrev();    }    //5 when mouse move over elements,stop rotate and show arrow    rotateImg.onmouseover = function() {        _this.moveOver();    }    //6 when mouse out star rotate and hide arrow    rotateImg.onmouseout = function() {        _this.moveOut();    }}Move.prototype.light = function(index) {    for(var j = 0; j < this.dotLiArray.length; j++) {        this.dotLiArray[j].className = "";    }    this.dotLiArray[index].className = "light";}Move.prototype.autoplay = function(num) {    this.num++;    if(this.num == this.imgUl.children.length - 1) {        this.light(0);        //if img comes to the clone img,light the first dot    } else if(this.num == this.imgUl.children.length) {        //if img is in the end ,set position to second img in a flash        this.imgUl.style.left = 0;        this.num = 1;        this.light(this.num);    } else {        this.light(this.num);    }    animation(this.imgUl, -this.num * this.width);}Move.prototype.movePrev = function() {    this.num--;    if(this.num == -1) {        //if image comes to the end then transform it before the clone image        this.imgUl.style.left = -this.width * (this.imgUl.children.length - 1) + "px";        //change img position suddenly        this.num = this.imgUl.children.length - 2;    }    this.light(this.num)    animation(this.imgUl, -this.num * this.width);}Move.prototype.moveOver = function() {    clearInterval(this.rotateImg.timer);    this.arrows.style.display = "block";}Move.prototype.moveOut = function() {    clearInterval(this.rotateImg.timer);    var this1 = this;    this.arrows.style.display = "none";    this.rotateImg.timer = setInterval(function() {        this1.autoplay(this1.num);    }, 1000)}Move.prototype.makeDiv = function() {    var div = document.createElement('div');    var str = '';    for(var i = 0; i < this.imgArr.length; i++) {        str += '
'    }    var rlis = str;    var slide = '    
     
      
       
        ' + rlis + '
       
      
      
      
       
        <
       
       
        >
       
      
     
';    div.innerHTML = slide;    document.body.append(div);}

 

 

 

继承一个子轮播图：

 

jquery实现：

   
             
     
   
      
    
       
        
    
       
               
    
       
               
    
       
        
   
      
   
      
    
       
     
        
1
     
        
2
     
        
3
     
        
4
    
       
    
       
     
        <     
        >