2019-8-29-02-JS-DOM

图片轮播是Web开发中最常见的组件之一，这是一篇用原生JavaScript实现简单图片轮播的教程。

要实现图片轮播，首先我们要将图片轮播拆分为图片容器、图片、上一页按钮、下一页按钮、底部点选容器、底部点选按钮。

下面我们用HTML代码表示。

...
<div id="page">
   <div id="ContainerWrap">
         <div class="pre"><</div> 
         <div id="picContainer">
            <img src="https://via.placeholder.com/500x250?text=1" alt="1">
            <img src="https://via.placeholder.com/500x250/000000?text=2" alt="2">
            <img src="https://via.placeholder.com/500x250/66ccff?text=3" alt="3">
            <img src="https://via.placeholder.com/500x250/000000?text=4" alt="4">
            <img src="https://via.placeholder.com/500x250/66ccff?text=5" alt="5">
         </div>
         <div id="dotContainer">
            <div class="dot active"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
         </div>
         <div class="next">></div>
   </div>
</div>
...

并为它添上样式。

* {
   margin: 0;
   padding: 0;
}
body {
   text-align: center;
}
#page{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
#ContainerWrap {
   width: 500px;
   overflow: hidden;
   margin: 0 auto;
}
#picContainer {
   height: 250px;
   width: 5000px;
   border-radius: 5px;
}
#picContainer img {
   border-radius: 5px;
   float: left;
   transition-property: position;
   transition-duration: 1s;
}
.pre,.next {
   position: absolute !important;
   height: 60px;
   width: 30px;
   background: rgba(0, 0, 0, 0.5);
   position: relative;
   color: white;
   line-height: 60px;
   text-align: center;
   z-index: 99999;
 
}
.pre {
   left: 0px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   top: 100px;
}
.next {
   right: 0px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   top: 100px;
}

#dotContainer {
   position: relative;
   top: -20px;
   left: 350px;
   z-index: 9999;
   height: 10px;
   width: 500px;
}
.dot {
   background: rgba(255, 255, 255, 0.5);
   width: 10px;
   height: 10px;
   border-radius: 10px;
   float: left;
   margin-left: 15px;
}

.dot.active {
   background: blueviolet;
}

到目前为止，我们的轮播已经初具雏形了。但要让图片轮播能够使用，我们还要使用JavaScript和DOM来控制HTML元素的显示与隐藏。

首先我们要声明一个变量作为当前轮播页码，并在点击任一切换按钮时改变它。我们可以把图片容器作为一个对象，当点击切换按钮时改变它的水平偏移量。

点选按钮在HTML代码中重复出现了五次，我们也将每一个按钮作为一个对象，并将所有点选按钮的长度（即个数）存储起来。

var currentIndex = 0;
var position = document.getElementById('picContainer');
var dot=document.querySelectorAll('.dot');
var len=dot.length;

先将点选后执行的DOM操作写作一个函数。

function slide(index){
  //移除所有选中状态
  for(var i=0;i<len;i++){
    dot[i].classList.remove("active");
  }
  //添加动态位移
  position.style.transform="translateX(-"+(index)*500+"px)";
  position.style.transitionDuration= "1s";
  //添加当前索引选中状态
  dot[index].classList.add("active");
  //改变当前索引为传入的参数
  currentIndex = index;
}

在HTML代码部分为上一页下一页添加点击事件，并为每个点选按钮添加点击事件为slide函数，并填上对应参数。

<div class="pre" onclick="prev()"><</div> 
...
<div id="dotContainer">
  <div class="dot active" onclick="slide(0)"></div>
  <div class="dot" onclick="slide(1)"></div>
  <div class="dot" onclick="slide(2)"></div>
  <div class="dot" onclick="slide(3)"></div>
  <div class="dot" onclick="slide(4)"></div>
</div>
...
<div class="pre" onclick="next()">></div> 

上一页/下一页按钮与点选按钮的原理相同，都是改变位移，因此我们只需再次调用slide函数。

function next() {
   if(currentIndex===len - 1){
      slide(0);
      return;
   }
   slide(currentIndex + 1);
}   
function prev() {
   if(currentIndex===0){
      slide(len-1);
      return;
   }
   slide(currentIndex-1);
}

当前页数索引（从0开始）是最后一个的时候，点击下一页返回到第一页，并改变索引为0，否则都切换到索引页的下一页。

当前页数索引是第一个的时候，点击上一页切换到最后一页，并改变索引为长度-1，否则都切换到索引页的上一页。

至此我们已经完全实现了一个简单的图片轮播具备的功能，感谢你的阅读。