原生JS实现

html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>rotate</title>
        <link rel="stylesheet" href="css/index.css" />
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }

        </style>
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
    <div id="rotateImg">
        <div id="imgcontainer">
            <ul>
                <li><a href="#"><img src="img/ppt/Familia--Stark.gif" alt="" /></a></li>
                <li><a href="#"><img src="img/ppt/game-of-thrones-deaths-09.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/ppt/margaery-and-sansa.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/ppt/Robb-Stark-Game-Of-Thrones.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/ppt/starks.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/ppt/game-of-thrones-has-been-an-integral-part.jpg" alt="" /></a></li>
                
            </ul>
        </div>
        <ul>
           
        </ul>
        <div class="arrows">
            <div class="prev"><</div>
            <div class="next">></div>
        </div>
    </div>

    </body>
</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.onload=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<imgList.length;i++){
        var newDot = document.createElement("li");
        newDot.innerHTML = i;
        dotUl.appendChild(newDot);
    }
    var dotLiArray = dotUl.children;
    
    //light first dot
    light(num);
    //2 click dot,transform image and light dot
    for(var k =0;k<dotLiArray.length;k++){
        dotLiArray[k].index = k;
        dotLiArray[k].onclick=function(){
            num = this.index;
            light(num);
            animation(imgUl,-num*width);
        }
    }
    
    function light(index){
    for(var j=0;j<dotLiArray.length;j++){
        dotLiArray[j].className="";
    }
    dotLiArray[index].className = "light";
    }
    
    // 3、next 
    next.onclick=autoplay;
    function autoplay(){
        num++;
        if(num==imgUl.children.length-1){
            light(0);
            //if img comes to the clone img,light the first dot
        }else if(num==imgUl.children.length){
            //if img is in the end ,set position to second img in a flash
            imgUl.style.left=0;
            num = 1;
            light(num);
            
        }else{
            light(num);
        }
        animation(imgUl,-num*width);
    }
    //4、prevent
    prev.onclick=function(){
        num--;
        if(num==-1){
            //if image comes to the end then transform it before the clone image
            imgUl.style.left=-width*(imgUl.children.length-1)+"px";
            //change img position suddenly
            num = imgUl.children.length-2;
        }
        light(num)
        animation(imgUl,-num*width);
    }
   
    //5 when mouse move over elements,stop rotate and show arrow
    rotateImg.onmouseover=function(){
        clearInterval(rotateImg.timer);
        arrows.style.display="block";
    }
    //6 when mouse out star rotate and hide arrow

    rotateImg.onmouseout=function(){
        clearInterval(rotateImg.timer);
        arrows.style.display="none";
        rotateImg.timer = setInterval(function(){
            autoplay();
        }, 1000)
    }
    
    //clearInterval and set original state as autoplay
    clearInterval(rotateImg.timer);
    rotateImg.timer = setInterval(function(){
            autoplay();
    }, 1000)

}

 

面向对象的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 += '<li><a href="#"><img src="' + this.imgArr[i] + '" alt="" /></a></li>'
    }
    var rlis = str;
    var slide = '    <div id="rotateImg"><div id="imgcontainer"><ul>' + rlis + '</ul></div><ul></ul><div class="arrows"><div class="prev"><</div><div class="next">></div></div></div>';
    div.innerHTML = slide;
    document.body.append(div);
}

 




 

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>rotate</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            #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;
            }
        </style>
        <script type="text/javascript" src="js/lanquery.js">
        </script>
    </head>

    <body>
        
    </body>

</html>

 

继承一个子轮播图:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>test</title>

        <link rel="stylesheet" type="text/css" href="css/dialog.css" />
        <link rel="stylesheet" href="css/slideImg.css" />
        <script type="text/javascript">
            window.onload = function() {
                var ar = ['img/wallPaper/v2-9f779d41608f6b4b62c75b597dde9f1e_b.jpg', 'img/wallPaper/starks.jpg','img/wallPaper/mygit.PNG','img/wallPaper/v2-3622d29e9ad7936ab3a869d438aad028_b.jpg'];
                //    new Move('img/wallPaper/v2-9f779d41608f6b4b62c75b597dde9f1e_b.jpg','img/wallPaper/starks.jpg','img/wallPaper/mygit.PNG');
                //                new Move(ar);

                function SubMove(id) {
                    Move.call(this, id);
                }
                //                SubMove.prototype = new Move();
                for(var i in Move.prototype) {
                    SubMove.prototype[i] = Move.prototype[i];
                }
                SubMove.prototype.moveOut = function() {
                    clearInterval(this.rotateImg.timer);
                    var this1 = this;
                    this.arrows.style.display = "none";
                    this.rotateImg.timer = setInterval(function() {
                        this1.autoplay(this1.num);
                    }, 3000)
                }
                new SubMove(ar);
            }
        </script>
        <script type="text/javascript" src="js/lanquery.js"></script>
    </head>

    <body>
    </body>

</html>

 

jquery实现:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jquery轮播效果图 </title> 
<script type="text/javascript" src="js/jquery.js"></script> 
<style type="text/css"> 
 * { 
  padding: 0px; 
  margin: 0px; 
 } 
 a { 
  text-decoration: none; 
 } 
 ul { 
  list-style: outside none none; 
 } 
 .slider, .slider-panel img, .slider-extra { 
  width: 650px; 
  height: 413px; 
 } 
 .slider { 
  text-align: center; 
  margin: 30px auto; 
  position: relative; 
 } 
 .slider-panel, .slider-nav, .slider-pre, .slider-next { 
  position: absolute; 
  z-index: 8; 
 } 
 .slider-panel { 
  position: absolute; 
 } 
 .slider-panel img { 
  border: none; 
 } 
 .slider-extra { 
  position: relative; 
 } 
 .slider-nav { 
  margin-left: -51px; 
  position: absolute; 
  left: 50%; 
  bottom: 4px; 
 } 
 .slider-nav li { 
  background: #ccc; 
  border-radius: 50%; 
  color: #fff; 
  cursor: pointer; 
  margin: 0 2px; 
  overflow: hidden; 
  text-align: center; 
  display: inline-block; 
  height: 18px; 
  line-height: 18px; 
  width: 18px; 
 } 
 .slider-nav .slider-item-selected { 
  background: lightcoral; 
 } 
 .slider-page a{ 
  background: rgba(0, 0, 0, 0.2); 
  color: #fff; 
  text-align: center; 
  display: block; 
  font-family: "helvetica"; 
  font-size: 22px; 
  width: 28px; 
  height: 62px; 
  line-height: 62px; 
  margin-top: -31px; 
  position: absolute; 
  top: 50%; 
 } 
 .slider-page a:hover { 
  background: rgba(0, 0, 0, 0.4); 
 } 
 .slider-next { 
  left: 100%; 
  margin-left: -28px; 
 } 
</style> 
<script type="text/javascript"> 
 $(document).ready(function() { 
  var currentIndex = 0;
  var  interval;//定时器
  var hasStarted = false; //是否已经开始轮播 
  var t = 2000; //轮播时间间隔 
  var length = $('.slider-panel').length; 
  //将除了第一张图片隐藏 
  $('.slider-panel:not(:first)').hide(); 
  //将第一个小原点slider-item设置为点亮状态 
  $('.slider-item:first').addClass('slider-item-selected'); 
  //隐藏向前、向后翻按钮 
  $('.slider-page').hide(); 
  //鼠标hover时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 
  $('.slider-panel, .slider-pre, .slider-next').hover(function() { 
   stop(); 
   $('.slider-page').show(); 
  }, function() { 
   $('.slider-page').hide(); 
   start(); 
  }); 
  //小圆点hover
  $('.slider-item').hover(function(e) { 
   stop(); //停止轮播
   //轮播到当前hover圆点对应图片
   var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
   currentIndex = $(this).index(); 
   play(preIndex, currentIndex); 
  }, function() { //hover结束重新轮播
   start(); 
  }); 
  //绑定onclick事件
  $('.slider-pre').on('click', function() { 
   pre(); 
  }); 
  $('.slider-next').unbind('click'); 
  $('.slider-next').bind('click', function() { 
   next(); 
  }); 
  /** 
   * 向前翻页 
   */
  function pre() { 
   var preIndex = currentIndex; 
   currentIndex = (--currentIndex + length) % length; 
   //length为图片数,当--currentIndex为-1时将其currentIndex设为length-1
// console.log(currentIndex);
   play(preIndex, currentIndex); 
  } 
  /** 
   * 向后翻页 
   */
  function next() { 
   var preIndex = currentIndex; 
   currentIndex = ++currentIndex % length; 
   play(preIndex, currentIndex); 
  } 
  /** 
   * 从preIndex页翻到currentIndex页 
   * preIndex 整数,翻页的起始页 
   * currentIndex 整数,翻到的那页 
   */
  function play(preIndex, currentIndex) { 
   $('.slider-panel').eq(preIndex).fadeOut(500) 
    .parent().children().eq(currentIndex).fadeIn(1000); 
    //点亮小圆点
   $('.slider-item').removeClass('slider-item-selected'); 
   $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 
  } 
  /** 
   * 开始轮播 默认向后轮播next
   */
  function start() { 
   if(!hasStarted) { 
    hasStarted = true; 
    
    clearInterval(interval);
    interval = setInterval(next, t); 
   } 
  } 
  /** 
   * 停止轮播 
   */
  function stop() { 
   clearInterval(interval); //清定时器
   hasStarted = false; 
  } 
  //开始轮播 
  start(); 
 }); 
</script> 
</head> 
<body> 
 <div class="slider"> 
  <ul class="slider-main"> 
   <li class="slider-panel"> 
    <img src="img/game-of-thrones-deaths-09.jpg"/>
   </li> 
   <li class="slider-panel"> 
    <img src="img/game-of-thrones-deaths-24.jpg"/>
       
   </li> 
   <li class="slider-panel"> 
    <img src="img/game-of-thrones-has-been-an-integral-part.jpg"/>
       
   </li> 
   <li class="slider-panel"> 
    <img src="img/image.jpg"/>
   </li> 
  </ul> 
  <div class="slider-extra"> 
   <ul class="slider-nav"> 
    <li class="slider-item">1</li> 
    <li class="slider-item">2</li> 
    <li class="slider-item">3</li> 
    <li class="slider-item">4</li> 
   </ul> 
   <div class="slider-page"> 
    <a class="slider-pre" href="#"><</a> 
    <a class="slider-next" href="#">></a> 
   </div> 
  </div> 
 </div> 
</body> 
</html>