欢迎指点！
预览图：
可以通过 https://littlehiuman.github.io/08-Carousel/index-2.html 查看本页面效果。
还有另一种的效果：https://littlehiuman.github.io/08-Carousel/index.html。
代码在这里：https://github.com/littleHiuman/littleHiuman.github.io/tree/master/08-Carousel
https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~
区别: 按钮组、左箭头、右箭头的实现是一样的。
index.html 通过改变left的值来进行图片轮播，所以布局上有两个外容器
index-2.html 通过获取索引来进行图片轮播，布局上只需要一个外容器
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } .containner { position: relative; overflow: hidden; width: 900px; height: 600px; } .containner:hover #prev, .containner:hover #next { display: block; } #prev, #next { display: none; position: absolute; top: 0; width: 15%; height: 100%; font-size: 50px; color: DodgerBlue; background: rgba(244, 50, 0, .1); text-align: center; cursor: pointer; } #prev { left: 0; } #next { right: 0; } .picGroup { position: absolute; width: 100%; height: 100%; } .picGroup img { display: block; width: 100%; height: 100%; } .titleGroup { position: absolute; top: 80%; width: 100%; height: 36px; line-height: 36px; background: rgba(0, 0, 0, .2); text-align: center; color: #fff; } .titleGroup p { display: none; } .btnGroup { position: absolute; top: 90%; left: 50%; transform: translateX(-50%); } .btnGroup li { display: inline-block; width: 10px; height: 10px; margin: 4px; background: #fff; cursor: pointer; } </style> </head> <body onselectstart="return false;" style="-moz-user-select:none;"> <div class="containner"> <div class="picGroup"> <img src="http://img3.imgtn.bdimg.com/it/u=1525767941,1365223150&fm=26&gp=0.jpg"> <img src="http://img0.imgtn.bdimg.com/it/u=501564876,418990644&fm=26&gp=0.jpg"> <img src="http://img0.imgtn.bdimg.com/it/u=2402875933,3197600583&fm=26&gp=0.jpg"> </div> <div class="titleGroup"> <p>标题1</p> <p>标题2</p> <p>标题3</p> </div> <ul class="btnGroup"> <li></li> <li></li> <li></li> </ul> <span id="prev"><</span> <span id="next">></span> </div> </body> <script> var current = 0; var picGroupItem = document.getElementsByClassName('picGroup')[0]; var imgHeight = picGroupItem.offsetHeight; var ctrlLeft = document.getElementById('prev'); var ctrlRight = document.getElementById('next'); ctrlLeft.style.lineHeight = imgHeight+'px'; ctrlRight.style.lineHeight = imgHeight+'px'; var btnGroupItem = document.getElementsByClassName('btnGroup')[0]; btnGroupItem.children[current].style.background = 'red'; var titleGroupItem = document.getElementsByClassName('titleGroup')[0]; titleGroupItem.children[current].style.display = 'block'; var aLi = document.getElementsByTagName('li'); var title = document.getElementsByTagName('p'); var picLen = picGroupItem.children.length; var timer; for (var i = 0; i < aLi.length; i++) { aLi[i].index = [i]; aLi[i].onclick = function () { clearInterval(timer); timer = setInterval(run, 2000); current = this.index; picGroupItem.style.top = -imgHeight * current + 'px'; otherChange(); } } // 开始轮播 timer = setInterval(run, 2000); function run() { current++ current %= picLen picGroupItem.style.top = -imgHeight * current + 'px'; otherChange(); } //按钮、title的事件 function otherChange() { for (var i = 0; i < picLen; i++) { if (i == current) { aLi[i].style.background = "red"; title[i].style.display = "block"; } else { aLi[i].style.background = ""; title[i].style.display = ""; } } } ctrlLeft.onclick = function () { clearInterval(timer); timer = setInterval(run, 2000); --current; current = current<0?picLen+current:current; current %= picLen; picGroupItem.style.top = -imgHeight * current + 'px'; otherChange(); } ctrlRight.onclick = function () { clearInterval(timer); timer = setInterval(run, 2000); ++current; current %= picLen; picGroupItem.style.top = -imgHeight * current + 'px'; otherChange(); } </script> </body> </html>