目前自己在学习JS中，用目前学到的东西写了一个轮播图，能完整的实现轮播图的功能，但是肯定还是有不完善的地方，也希望大家能留言交流，一起学习。
一、思路
首先将功能一个一个理顺，主要功能分为三大块：
（一）点击左右按钮，实现更换图片并循环。
（二）图片自动定时切换，当鼠标在图片上时暂停切换，移出时恢复。
（三）轮播图上导航点变换与点击切换
二、实现
HTML和CSS的代码如下：
<!doctype html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
box-sizing: content-box;
text-decoration: none;
}
#container {
width:600px;
height:300px;
border:1px red solid;
overflow: hidden;
position: relative;
}
#list {
position: absolute;
z-index: 1;
width: 3000px;
}
#list img {
width: 600px;
height: 300px;
padding: 0;
margin: 0;
}
#prev {
position: absolute;
top: 40%;
left: 0;
height:70px;
width: 30px;
z-index: 2;
}
#next {
position: absolute;
top: 40%;
right: 0;
height:70px;
width: 30px;
z-index: 2;
}
#list-buttons {
position: absolute;
bottom: 5%;
z-index: 2;
width:600px;
text-align: center;
}
#list-buttons span{
display: inline-block;
width: 10px;
height: 10px;
background-color: #ffffff;
border-radius: 100%;
}
#list-buttons .on{
background-color: #b2b2b2;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: 0px;"> <!-- 0px为初始位置 -->
<img src="img-01.jpg" alt="1">
<img src="img-02.jpg" alt="1">
<img src="img-03.jpg" alt="1">
</div>
<div id="list-buttons">
<span class="on"></span>
<span></span>
<span></span>
</div>
<div>
<button id="prev" class="button" type="button"><</button>
<button id="next" class="button" type="button">></button>
</div>
</div>
<body>
（一）左右按钮切换图片
首先取得操作切换图片的元素：
var prev = document.getElementById('prev');
var next = document.getElementById('next');
然后我用三张图片组成了一串图片条，以图片条的左边缘作为图片的起始位置，通过不断修改图片的起始位置，从而让图片显示在可显示的区域里。
这里写了两个函数，分别对应左右的切换按钮。
这里图片的宽段是600px，要点击next按钮让图片切换下一张，那就得在让图片条向左移动600px。为了让切换的图片能够循环，当到达最后一张图片的位置时，再点击下一张按钮，就会重置到第一张图片，以此循环。
var initial = parseInt(list.style.left); //listImage的初始数值
function nextMove(){
initial -= 600; //图片向左滑动
if(initial < -1200){
initial = 0;
}
list.style.left = initial + 'px';
//调用dot函数，判断当前点的位置
dot();
}
function prevMove(){
initial += 600; //图片向右滑动
if(initial > 0){
initial = -1200;
}
list.style.left = initial + 'px';
}
（二）图片自动定时切换与当鼠标在图片上时暂停切换，移出时恢复
要实现定时自动播放，那就得用window.setInterval（）方法，在指定的时间间隔调用函数，同时将它返回的值赋给变量time，这里就实现了自动切换。
var time = window.setInterval(nextMove, 2000);
.setInterval（）方法还有一个对应的clearInterval()方法，用来取消调用函数。所以我就写了一个函数，来判断鼠标的状态是移进还是移出，并给图片区域绑定了事件处理程序，这样当鼠标移进就会暂停，移出继续。
var container = document.getElementById('container');
container.addEventListener('mouseenter', state, false);
container.addEventListener('mouseleave', state, false);
function state(eventName){
switch(eventName.type){
case 'mouseenter':
window.clearInterval(time);
break;
case 'mouseleave':
time = window.setInterval(nextMove, 2000);
break;
}
}
（三）轮播图上导航点变换与点击切换
首先要实现点跟着图片进行变换，所以声明一个函数，判断当前图片条的位置，来对应设置相应位置的导航点样式，并取消其他导航点的样式。
var listBtn = document.getElementsByTagName('span');
function dot(){
switch(initial){
case 0:
console.log('0px');
listBtn[0].className = 'on';
listBtn[1].className = '';
listBtn[2].className = '';
break;
case -600:
console.log('-600px');
listBtn[0].className = '';
listBtn[1].className = 'on';
listBtn[2].className = '';
break;
case -1200:
console.log('-1200px');
listBtn[0].className = '';
listBtn[1].className = '';
listBtn[2].className = 'on';
break;
}
}
最后就是当点击相应的导航点时，跳转到对应的图片上了。为此，我给每个导航点添加了一个索引属性，再通过判断点击的是第几个导航点，切换到对应的图片位置就可以了。
for(let i = 0; i < listBtn.length; i++){
listBtn[i].index = i;
listBtn[i].addEventListener('click', function(){
switch(listBtn[i].index){
case 0:
initial = 0;
dot();
list.style.left = '0px';
break;
case 1:
initial = -600;
dot();
list.style.left = '-600px';
break;
case 2:
initial = -1200;
dot();
list.style.left = '-1200px';
break;
}
}, false);
}
以上就是整个轮播图的实现过程。
2018-07-20
