前两天同事面试新人，让现场写”轮播的实现”。我一想这玩意貌似我也没写过啊，就在旁边暗搓搓地拖了一张纸也在那写，同事都纳闷了！
这玩意实现方法有很多种，就看喜欢那种，喜欢怎么写而已。我这里是通过对img opacity样式修改，达到对img显隐的控制。img轮播到那个位置，就对该位置的img样式进行设置，首先将上一张img样式opacity变为0，然后将新位置img样式opacity设置为1，从而形成轮播。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????.main,.scollimg,img{ ???????????width: 1500px; ???????????height: 800px; ???????} ???????.main { ???????????margin: 0 auto; ???????????position: relative; ???????} ???????.main .scollimg { ???????????position: relative; ???????} ???????.main .scollimg img { ???????????position: absolute; ???????????top: 0; ???????????left: 0; ???????} ???????.main .item { ???????????position: absolute; ???????????bottom: 30px; ???????????left: 70px; ???????????width: 200px; ???????????height: 16px; ???????} ???????.main .item span { ???????????width: 16px; ???????????height: 16px; ???????????background-color: #ffffff; ???????????display: inline-block; ???????????border-radius: 50%; ???????} ???????.main .item span:hover { ???????????cursor: pointer; ???????} ???????.arrow { ???????????position: absolute; ???????????top: 280px; ???????????z-index: 2; ???????????display: none; ???????????width: 40px; ???????????height: 40px; ???????????font-size: 36px; ???????????font-weight: bold; ???????????line-height: 39px; ???????????text-align: center; ???????????color: #ffffff; ???????????background-color: rgba(0, 0, 0, 0.3); ???????????cursor: pointer; ???????} ???????.arrow:hover { ???????????background-color: rgba(0, 0, 0, 0.7); ???????} ???????.main:hover .arrow { ???????????display: block; ???????} ???????#btnleft { ???????????left: 20px; ???????} ???????#btnright { ???????????right: 20px; ???????} ???</style></head><body><div class="main"> ???<div class="scollimg"> ???????<img src="img/1.jpg" > ???????<img src="img/2.jpg" > ???????<img src="img/3.jpg" > ???????<img src="img/4.jpg" > ???????<img src="img/5.jpg" > ???</div> ???<div class="btn"> ???????<a href="javascript:;" id="btnleft" class="arrow"><</a> ???????<a href="javascript:;" id="btnright" class="arrow">></a> ???</div> ???<div class="item"> ???????<span data-index="0"></span> ???????<span data-index="1"></span> ???????<span data-index="2"></span> ???????<span data-index="3"></span> ???????<span data-index="4"></span> ???</div></div><script type="text/javascript"> ???var autoMove = { ???????imgs: null, ???????//img节点数量(图片数量) ???????spans: null, ??????//span节点数量(左下角圆圈) ???????count: 0, ?????????//对轮播播放到那张图片进行计数 ???????scollMove: -1, ????//span节点数量(左下角圆圈) ???????lastNode: 0, ??????//上一张img和span索引位置 ???????//通过对img opacity修改，达到对img显隐的控制 ???????//index: 轮播索引。img轮播到那个位置，就对该位置的img样式进行设置。首先将上一张img样式opacity变为0，然后将index位置img样式opacity设置为1 ???????styleMovement: function (index) { ???????????var tempLastNode = this.lastNode, tempImgs = this.imgs, tempSpans = this.spans; ???????????tempImgs[tempLastNode].style.opacity = "0"; ???????????tempSpans[tempLastNode].style.background = "#ffffff"; ???????????tempImgs[index].style.opacity = "1"; ???????????tempSpans[index].style.background = "#ff0000"; ???????????this.lastNode = index; ???????}, ???????//轮播按count计数进行切换。初始化时显示第一张图片，然后隐藏第一张图片显现第二张图片，以此类推 ???????//此处count从1开始计数（初始化时count为0），依次执行。当count===imgs.length时，由于图片最后一张的imgs索引是imgs.length-1,故将count重置为0，起到一个轮循作用，依次重新开始。 ???????shiftMovement: function () { ???????????autoMove.styleMovement(this.count++); ???????????if (this.count === this.imgs.length) { ???????????????this.count = 0; ???????????} ???????}, ???????//按钮和点击操作 ???????btnAction: function (type) { ???????????clearInterval(this.scollMove); ?????//按钮操作之前，先清除轮播定时器，避免时间冲突 ???????????switch (type) { ???????????????case "left": { ???????????????????if (this.count === 0) { ???????????????????????this.count = (this.imgs.length - 1); ???????????????????} else { ???????????????????????this.count--; ???????????????????} ???????????????????autoMove.styleMovement(this.count); ???????????????????break; ???????????????} ???????????????case "right": { ???????????????????autoMove.shiftMovement(); ???????????????????break; ???????????????} ???????????????default: { ???????????????????this.count = type; ???????????????????autoMove.styleMovement(type); ???????????????????break ???????????????} ???????????} ???????????this.scollMove = setInterval(function () { ?????//鼠标操作完成后，重新执行轮播定时器 ???????????????autoMove.shiftMovement(); ???????????}, 2000); ???????}, ???????//事件绑定 ???????bindingEvent: function () { ???????????document.getElementById(‘btnleft‘).addEventListener("click", function () { ??????//给左按钮绑定事件 ???????????????autoMove.btnAction("left"); ???????????}); ???????????document.getElementById(‘btnright‘).addEventListener("click", function () { ?????//给右按钮绑定事件 ???????????????autoMove.btnAction("right"); ???????????}); ???????????document.querySelector(‘.item‘).addEventListener("click", function (event) { ????//点击某个具体span绑定事件 ???????????????autoMove.btnAction(parseInt(event.target.getAttribute("data-index"))); ???????????}); ???????}, ???????//功能初始化:节点获取，事件绑定，执行定时器 ???????init: function (par1,par2) { ???//参数和功能初始化 ???????????var tempImgs = this.imgs = document.getElementsByTagName(par1); ???????????var tempSpans = this.spans = document.getElementsByTagName(par2); ???????????var length = tempImgs.length; ???????????for (var i = length; i--;) { ???????//将所有img和span的opacity样式都设置为0 ???????????????tempImgs[i].style.opacity = "0"; ???????????????tempSpans[i].style.background = "#ffffff"; ???????????} ???????????autoMove.bindingEvent(); ???????????autoMove.styleMovement(0); ??//初始化时，显示第一张图片(索引为0的位置) ???????????this.count++; ???????????????//在执行轮播定时器之前，先将count计数自加 1，则在执行定时器时，图片从第二张(索引为1)开始显示，从而形成连贯显示 ???????????this.scollMove = setInterval(function () { ??//设置轮播定时器，每2秒自动执行一次 ???????????????autoMove.shiftMovement() ???????????}, 2000) ???????} ???}; ???//加载完成执行 ???window.onload = function () { ???????autoMove.init("img", "span"); ???};</script></body></html>js原生实现轮播
原文地址：https://www.cnblogs.com/donghuang/p/9119810.html