原生js简单轮播图
实现原理：
一系列大小相等的图片平铺，利用css布局，只显示其中一张图片，其它图片隐藏。通过偏移量来实现滑动，或者手动点击来实现滑动。
Html布局
<body> <div id="container"> <div id="list" style="left: 0px"> <!-- <img src="./img/pic_05.png" alt="1" />--> <img src="./img/pic_01.png" alt="1" /> <img src="./img/pic_02.png" alt="2" /> <img src="./img/pic_03.png" alt="3" /> <img src="./img/pic_04.png" alt="4" /> <img src="./img/pic_05.png" alt="5" /> <!--<img src="./img/pic_01.png" alt="5" />--> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a>
父容器container存放所有内容，list子容器存放图片，buttons子容器存放按钮小圆点。下面的表示轮播的两个箭头。
进行优化，实现无缝轮播
当从最后一张图滚动到第一张图时，中间有很大的空白。
CSS部分
注意list部分，overfloat : hidden ; 显示一张图片，其它图片隐藏。
<style> * { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; } #container { position: relative; width: 600px; height: 400px; border: 3px solid #333; margin: 50px auto; overflow: hidden; } #list { position: absolute; z-index: 1; width: 4200px; height: 400px; } #list img { float: left; width: 600px; height: 400px; } #buttons { position: absolute; left: 250px; bottom: 20px; z-index: 2; height: 10px; width: 100px; } #buttons span { float: left; margin-right: 5px; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #333; cursor: pointer; } #buttons .on { background: orangered; } .arrow { position: absolute; top: 180px; z-index: 2; display: none; width: 40px; height: 40px; font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, .3); cursor: pointer; } .arrow:hover { background-color: RGBA(0, 0, 0, .7); } #container:hover .arrow { display: block; } #prev { left: 20px; } #next { right: 20px; } </style>
如下图所示：
JS部分
首先实现手动点击左右箭头，实现图片的偏移；
function animate(offset) { console.log(list.style.left); //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值， //且style.left获取的是字符串，需要用parseInt()取整转化为数字。 var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; if(newLeft<-2400){ list.style.left = 0 + 'px'; } if(newLeft>0){ list.style.left = -2400 + 'px'; } }
但是现在问题来了，当点击图片到最后一张时候，无法跳到第一张。原因是我们用left偏移量来控制图片，在点击箭头时偏移量在发生变化，为了在最后一张图片点击时能跳到第一张图片，我们需要对偏移量做一个判断；
在animate函数里加上一个关于偏移量的判断；
prev.onclick = function() { animate(600); } next.onclick = function() { animate(-600); } 加上该判断后运行下，能跳转到第一页，没问题。
自动轮播，顾名思义就是自己能切换图片，则此时需要给他添加一个定时器
这里我们是用setInterval()，因为我们的图片需要循环滚动
var timer; function play(){ timer = setInterval(function () { prev.onclick() }, 1500) } play();
当把鼠标移到图片上面时，停止自动切换，鼠标移开时继续自动切换
function stop(){ clearInterval(timer); } //为什么不用stop(); container.onmouseover = stop; container.onmouseout = play;
（有必要强调一下对于定时器，有必要说明一下setInterval()跟setTimeout的区别了。简单来说，setInterval()执行多次，setTimeout()只执行一次。）
小圆点部分
var buttons = document.getElementById('buttons').getElementsByTagName('span'); var index = 1; function buttonsShow() { //这里需要清除之前的样式 for (var i = 0; i < buttons.length; i++) { if (buttons[i].className == 'on') { buttons[i].className = ''; } } //数组从0开始，故index需要-1 buttons[index - 1].className = 'on'; } prev.onclick = function() { index -= 1; if (index < 1) { index = 5; } buttonsShow(); animate(600); } next.onclick = function() { //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断 index += 1; if (index > 5) { index = 1; } buttonsShow(); animate(-600); } }
好了~把上述代码拼在一起，就能组成一个简单的轮播咯。
