纯JS实现轮播图效果

轮播图

今天用纯JS把轮播图做出来了，一个完整的轮播图包括以下三个部分的功能：
一、左右两边有一个按钮可以点击切换

二、底部有几个小圆点，圆点会跟随图片的切换而切换，且点击具体某个圆点时，跳转到相应图片

三、整个轮播图定时自动切换

实现效果图如下：

实现效果图

代码解析：

HTML布局

<div class="wrap">
          <ul class="list">
              <li class="item active"><img src="image/yourName.jpg" alt=""></li>
              <li class="item"><img src="image/pilipili.jpg" alt=""></li>
              <li class="item"><img src="image/flower.jpg" alt=""></li>
              <li class="item"><img src="image/reo.jpg" alt=""></li>
              <li class="item"><img src="image/yu.jpg" alt=""></li>
          </ul>
   	 <ul class="pointList">
    	   <li class="point active" data-index="0"></li>
   	   <li class="point" data-index="1"></li>
    	   <li class="point" data-index="2"></li>
   	   <li class="point" data-index="3"></li>
     	   <li class="point" data-index="4"></li>
         </ul>
       <button type="button" class="btn" id="goPre"> < </button>
       <button type="button" class="btn" id="goNext"> > </button>
</div>

用一个div包裹住整个轮播图，两个ul分别是包裹着图片和图片下方的小圆点，再用两个button来写左右两边的按钮

CSS样式

/* 图片样式 */
   .wrap{
    width: 800px;
    height: 400px;
    position: relative;
    cursor: pointer;
   }
          .list{
              width: 800px;
              height: 400px;
     padding: 0;
              list-style: none;
     position: relative;
          }
          .item{
     position: absolute;/* 让五张图片叠在一起 */
              width: 100%;
              height: 100%;
     opacity: 0;/* 设置元素的不透明级别*/
     transition: all .8s;/* 元素过渡属性 */
          }
          .item:nth-child(1){
              background-color: pink;
          }
          .item:nth-child(2){
              background-color: red;
          }
          .item:nth-child(3){
              background-color: blue;
          }
          .item:nth-child(4){
              background-color: green;
          }
          .item:nth-child(5){
              background-color: yellow;
          }
    .item img{
     width: 100%;
     height: 100%;
    }
    /* 左右按钮样式 */
    .btn{
     width: 50px;
     height: 100px;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 100;
     cursor: pointer;
     font-size: 26px;
     color: #CCCCCC;
     background: none;
     border: 0;
     display: none;
    }
    .wrap:hover .btn{
     display: block;
     background:rgba(0,0,0,.3);
     border: 0;
     outline: none;/* 去除button默认样式 */
    }
    #goPre{
     left: 0;
    }
    #goNext{
     right: 0;
    }
    .active{
     /* 当前被选中的样式 */
     opacity: 1;
     z-index: 10;
    }
    /* 下方小圆点样式 */
    .pointList{
     padding: 0;
     list-style: none;
     position: absolute;
     bottom: 0;
     right: 10px;
     z-index: 10;
    }
    .point{
     width: 10px;
     height: 10px;
     background: rgba(0,0,0, .4);
     border: 2px solid rgba(255,255,255,.8);
     border-radius: 50%;
     float: left;
     margin-left: 10px;
     cursor: pointer;
    }
    .point.active{
     /* 当前被选中的样式 */
     background: rgba(255,255,255,.8);
    }

下面开始JS代码的编写，这里用到的是原生JS，主要是封装两个函数，再写一个“切换至下一个”和“切换至上一个”的函数

第一步先获取到需要用到的元素

var items=document.getElementsByClassName("item");//获取图片
   var goPreBtn=document.getElementById("goPre");//获取左边按钮
   var goNextBtn=document.getElementById("goNext");//获取右边按钮
   var points=document.getElementsByClassName("point");//获取小圆点

设置一个变量 var index=0; 用来存储现在图片的位置，以及小圆点的位置，

首先写两个函数，一个清除图片和小圆点的默认的 active 样式，再写一个函数，用来添加active样式，第二个函数，主要是针对index进行操作

var clearActive=function(){
    for(var i = 0; i < items.length; i++){
     items[i].className="item";
    }
    for( var i = 0; i < points.length; i++){
     points[i].className="point";
    }
   }

var goIndex=function(){
    clearActive();
    console.log(index);
    items[index].className="item active";
    points[index].className="point active";
    time = -10;//这里的time是定时器的时间
   }

第一个功能是：点击左右按钮切换图片，先写出“切换至下一个”和“切换至上一个”的函数，这里需要对index做出判断，如果index到了第一张还点击切换下一个就跳回到最后一张，直接让index==4，等于最后一张图片的索引值，切换上一个同理

var goPre=function(){
    if(index == 0){
     index = 4;
    }else{
     index--;
    }
    
    goIndex();
   }

var goNext=function(){
    if(index < items.length-1){
     index++;
    }else{
     index = 0;
    }
    goIndex();
   }

最后将时间挂载在两个button上

goNextBtn.addEventListener("click",function(){
    goNext();
   })
   goPreBtn.addEventListener("click",function(){
    goPre();
   })

第二个功能是：点击小圆点切换图片，循环遍历，给每个小圆点添加点击事件，用 this.getAttribute(“data-index”)获取到当前小圆点的索引值，这个在之前的HTML中就给每个 li 添加过，再将索引值赋给index 即可

for(var i = 0; i < points.length; i++){
    points[i].addEventListener("click",function(){
     var pointIndex = this.getAttribute("data-index");
     index = pointIndex;
     goIndex();
     
    })
   }

第三个功能是：自动切换图片，这个功能主要用到了定时器，申明一个time 值var time = 0;这个主要针对切换时间进行操作，防止出现，在定时切换时，触发点击切换会之后会立马跳转到下一张图片，解决使用感不好的问题，加了time之后，不作操作是每两秒跳转一次，点击之后等待一段时间，再继续两秒跳转一次。

setInterval(function(){
    time++;
    if(time == 20){
     goNext();
     time = 0;
    }
   },100)

以上，轮播图整个效果都完成了，下面附上完整代码，在复制粘贴时，注意图片的路径换成本地的

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   /* 图片样式 */
   .wrap{
    width: 800px;
    height: 400px;
    position: relative;
    cursor: pointer;
   }
          .list{
              width: 800px;
              height: 400px;
     padding: 0;
              list-style: none;
     position: relative;
          }
          .item{
     position: absolute;/* 让五张图片叠在一起 */
              width: 100%;
              height: 100%;
     opacity: 0;/* 设置元素的不透明级别*/
     transition: all .8s;/* 元素过渡属性 */
          }
          .item:nth-child(1){
              background-color: pink;
          }
          .item:nth-child(2){
              background-color: red;
          }
          .item:nth-child(3){
              background-color: blue;
          }
          .item:nth-child(4){
              background-color: green;
          }
          .item:nth-child(5){
              background-color: yellow;
          }
    .item img{
     width: 100%;
     height: 100%;
    }
    /* 左右按钮样式 */
    .btn{
     width: 50px;
     height: 100px;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 100;
     cursor: pointer;
     font-size: 26px;
     color: #CCCCCC;
     background: none;
     border: 0;
     display: none;
    }
    .wrap:hover .btn{
     display: block;
     background:rgba(0,0,0,.3);
     border: 0;
     outline: none;/* 去除button默认样式 */
    }
    #goPre{
     left: 0;
    }
    #goNext{
     right: 0;
    }
    .active{
     /* 当前被选中的样式 */
     opacity: 1;
     z-index: 10;
    }
    /* 下方小圆点样式 */
    .pointList{
     padding: 0;
     list-style: none;
     position: absolute;
     bottom: 0;
     right: 10px;
     z-index: 10;
    }
    .point{
     width: 10px;
     height: 10px;
     background: rgba(0,0,0, .4);
     border: 2px solid rgba(255,255,255,.8);
     border-radius: 50%;
     float: left;
     margin-left: 10px;
     cursor: pointer;
    }
    .point.active{
     /* 当前被选中的样式 */
     background: rgba(255,255,255,.8);
    }
      </style>
 </head>
 <body>
  <div class="wrap">
          <ul class="list">
              <li class="item active"><img src="image/yourName.jpg" alt=""></li>
              <li class="item"><img src="image/pilipili.jpg" alt=""></li>
              <li class="item"><img src="image/flower.jpg" alt=""></li>
              <li class="item"><img src="image/reo.jpg" alt=""></li>
              <li class="item"><img src="image/yu.jpg" alt=""></li>
          </ul>
    <ul class="pointList">
     <li class="point active" data-index="0"></li>
     <li class="point" data-index="1"></li>
     <li class="point" data-index="2"></li>
     <li class="point" data-index="3"></li>
     <li class="point" data-index="4"></li>
    </ul>
    <button type="button" class="btn" id="goPre"> < </button>
    <button type="button" class="btn" id="goNext"> > </button>
     </div>
     
  <script>
   var items=document.getElementsByClassName("item");//获取图片
   var goPreBtn=document.getElementById("goPre");//获取左边按钮
   var goNextBtn=document.getElementById("goNext");//获取右边按钮
   var points=document.getElementsByClassName("point");//获取小圆点
   var time = 0;//小圆点图片定时器
   
   var index=0;//表示第几张图片在展示
   
   var clearActive=function(){
    for(var i = 0; i < items.length; i++){
     items[i].className="item";
    }
    for( var i = 0; i < points.length; i++){
     points[i].className="point";
    }
   }
   
   var goIndex=function(){
    clearActive();
    console.log(index);
    items[index].className="item active";
    points[index].className="point active";
    time = -10;//这里的time是定时器的时间
   }
   
   var goNext=function(){
    if(index < items.length-1){
     index++;
    }else{
     index = 0;
    }
    goIndex();
   }
   
   var goPre=function(){
    if(index == 0){
     index = 4;
    }else{
     index--;
    }
    
    goIndex();
   }
   
   //挂载事件
   goNextBtn.addEventListener("click",function(){
    goNext();
   })
   goPreBtn.addEventListener("click",function(){
    goPre();
   })
   for(var i = 0; i < points.length; i++){
    points[i].addEventListener("click",function(){
     var pointIndex = this.getAttribute("data-index");
     index = pointIndex;
     goIndex();
     
    })
   }
   //定时轮播
   
   setInterval(function(){
    time++;
    if(time == 20){
     goNext();
     time = 0;
    }
   },100)
  </script>
 </body>
</html>