目前自己在学习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
用原生JS 写Web首页轮播图
原文地址：https://www.cnblogs.com/pine-cone/p/9343724.html