如何用js实现图片轮播

轮播，无论是文字轮播还是图片轮播，他们的原理是一样的，都是通过定时器执行循环展示和隐藏。
1.原理

将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏；定时器进行计时来计算偏移量实现图片自动轮播。

2.实现：

实现布局只显示一张图片，首先给容器一个固定的长和宽，然后设置over-flow:hidden。
实现图片自动轮播必须要有定时器进行计时。

3.步骤：

(1)实现图片平铺

HTML代码部分：

<div class="main_div">
<div class="arrows">
     <span title="1" class="arrow"><</span>
     <span title="0" class="arrow" style="float: right">></span>
</div>
<ul class="ul_img">
         <li class="li_img">![](images/摄图网-水珠在竹叶上.jpg)</li>
         <li class="li_img">![](images/摄图网-在海边的人.jpg)</li>
         <li class="li_img">![](images/摄图网-清凉的荷叶.jpg)</li>
         <li class="li_img">![](images/摄图网-绵延不绝的山岭.jpg)</li>
   </ul>
</div>

 <div style="margin-left: 600px">
         <div class="div_btn"></div>
         <div class="div_btn"></div>
         <div class="div_btn"></div>
         <div class="div_btn"></div>
</div>

这一步实现了四张图片，左右方向键与底部的四个圆角矩形。

CSS部分：

    <style>
    img {
        width: 100%;
    }

    .li_img {
        width: 800px;
        float: left;
        list-style: none;
    }

    .ul_img {
        width: 6000px;
        padding: 0px;
        margin: 0px;
        transition: all 2s;
    }

    .main_div {
        width: 800px;
        overflow: hidden;
        position: relative;
        top: 100px;
        left: 350px;
    }

    .arrows {
        z-index: 9999;
        position: absolute;
        padding-top: 230px;
        width: 800px;
    }

    .arrows span {
        font-size: 3em;
        color: seashell;
    }

    .arrows span:hover {
        /*变小手*/
        cursor: pointer;
        background-color: rgba(192, 192, 192, 0.29);
    }

    .div_btn {
        float: left;
        border-radius: 100px;
        background-color: aquamarine;
        width: 60px;
        height: 10px;
        margin-left: 10px;
        margin-top: 130px;
    }

    .div_btn:hover {
        background-color: aqua;

    }

(2)实现图片轮播
要实现自动，必须有定时器进行计时。对于定时器有setInterval()与setTimeout()两种方法。他们的区别简单来说在于setInterval()可以执行多次，而setTimeout()只执行一次。

详情可见：你真的了解setTimeout和setInterval吗？ – 前端技术漫游指南

因为图片自动轮播需要每隔一段时间执行一次，所以选择setInterval()函数。

图片可以自动右向轮播，轮播至最后一张图片的时候，反向向左轮播，循环反复

• 要想让图片自动轮播，我们首先去设定一个函数showtime()。
  这个部分的思路如下：

  首先我们设定图片轮播方向，然后设定一个跑动的次数，最后设定一个定时器对象。

首先声明需要的全局变量：

//跑动的次数
var count = 0;
//动画的执行方向
var isgo = false;
//定义计时器对象
var timer;

获取图片元素：

/*获取ul元素*/
var ul_img = document.getElementsByClassName("ul_img")[0];
//获取所有的li图片元素
var li_img = document.getElementsByClassName("li_img");

showtime()函数部分：

function showtime() {
         timer = setInterval(function (){
            if (isgo == false) {
               count++;
               ul_img.style.transform = "translate(" + -800 * count + "px)";
                 if (count >= li_img.length - 1) {
                        count = li_img.length - 1;
                        isgo = true;
              }
         }
     }, 4000);
 }

判断语句的目的是：在count大于等于li.img.length-1（即count >= 3）时，禁止count再自增，同时改变isgo的值，让轮播图开始反向滚动。else的情况就是控制图片反向轮播，所以以上代码很好理解，就是count--，并且在count <= 0时，为isgo重新设置false，让图片再正向轮播，循环往复，最后再调用showtime()函数。

• 用左右方向键去控制图片轮播方向

  首先获取左右两个方向键。

    //获取控制方向的箭头元素
      var arrow = document.getElementsByClassName("arrow");
  

  用for循环来为两个方向键绑定事件：

   for (var i = 0; i < arrow.length; i++) {
        //鼠标悬停时
        arrow[i].onmouseover = function () {
        //停止计时器
        clearInterval(timer);
       }
        //鼠标离开时
        arrow[i].onmouseout = function () {
        //添加计时器
        showtime();
      }
  }
  

为方向键添加onclick事件，以便我们可以通过其控制方向：

     for (var i = 0; i < arrow.length; i++) {
      //鼠标悬停时
      arrow[i].onmouseover = function () {
      //停止计时器
      clearInterval(timer);
      }
      //鼠标离开时
      arrow[i].onmouseout = function () {
      //添加计时器
      showtime();
     }
     arrow[i].onclick = function () {
     //区分左右
     if (this.title == 0) {
       count++;
      if (count > 3) {
       count = 0;
     }
    }
      else {
       count--;
      if (count < 0) {
       count = 3;
     }
    }
   ul_img.style.transform = "translate(" + -800 * count + "px)";
 }
} 

• 用for循环为四个圆角矩形绑定事件：

  var div_btn = document.getElementsByClassName("div_btn");
   div_btn[0].style.backgroundColor = "aqua";       
   //鼠标悬停在底部按钮的操作
   for (var b = 0; b < div_btn.length; b++) {
          div_btn[b].index = b;
          div_btn[b].onmouseover = function () {}
          div_btn[b].onmouseout = function () {}
      }
  

关于div_btn[b].index = b这条语句。参考文章 关于在for循环中绑定事件打印变量i是最后一次

鼠标悬停事件：

   div_btn[b].onmouseover = function () {
      clearInterval(timer);

  for (var a = 0; a < div_btn.length; a++) {
      div_btn[a].style.backgroundColor = "aquamarine";
   }
      div_btn[this.index].style.backgroundColor = "aqua";
  //为了控制方向
  if (this.index == 3) {
     isgo = true;
   }
  if (this.index == 0) {
     isgo = false;
   }
  //让count值对应
  count = this.index;
  ul_img.style.transform = "translate(" + -800 * this.index + "px)";
}

}

鼠标离开事件：

 div_btn[b].onmouseout = function () {
  //添加计时器
  showtime();
    }
}

图片自动轮播和控制左右方向键时，底部圆角矩形也能随之变色。

 for (var a = 0; a < div_btn.length; a++) {
          div_btn[a].style.backgroundColor = "aquamarine";
       }
          div_btn[count].style.backgroundColor = "aqua";
}

参考博文：十五分钟用 JavaScript 基础写一个图片轮播效果 + 思路详解