前两天同事面试新人，让现场写”轮播的实现”。我一想这玩意貌似我也没写过啊，就在旁边暗搓搓地拖了一张纸也在那写，同事都纳闷了！
这玩意实现方法有很多种，就看喜欢那种，喜欢怎么写而已。我这里是通过对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.3);
cursor: pointer;
}
.arrow:hover {
background-color: rgba(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" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</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: span节点数量(左下角圆圈)
count: 0,1)">对轮播播放到那张图片进行计数
scollMove: -1,1)">span节点数量(左下角圆圈)
lastNode: 0,1)">上一张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: () {
autoMove.styleMovement(this.count++);
if (this.count === .imgs.length) {
this.count = 0;
}
},1)">按钮和点击操作
btnAction: (type) {
clearInterval(this.scollMove); 按钮操作之前，先清除轮播定时器，避免时间冲突
switch (type) {
case "left": {
this.count === 0) {
this.count = (this.imgs.length - 1);
} else {
this.count--;
}
autoMove.styleMovement(.count);
break;
}
case "right": {
autoMove.shiftMovement();
defaultthis.count = type;
autoMove.styleMovement(type);
}
}
this.scollMove = setInterval(function () { 鼠标操作完成后，重新执行轮播定时器
autoMove.shiftMovement();
},2000);
},1)">事件绑定
bindingEvent: () {
document.getElementById('btnleft').addEventListener("click",1)">function () { 给左按钮绑定事件
autoMove.btnAction("left");
});
document.getElementById('btnright').addEventListener("click",1)">给右按钮绑定事件
autoMove.btnAction("right");
});
document.querySelector('.item').addEventListener("click",1)">function (event) { 点击某个具体span绑定事件
autoMove.btnAction(parseInt(event.target.getAttribute("data-index")));
});
},1)">功能初始化:节点获取，事件绑定，执行定时器
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)开始显示，从而形成连贯显示
function () { 设置轮播定时器，每2秒自动执行一次
autoMove.shiftMovement()
},1)">)
}
};
加载完成执行
window.onload = () {
autoMove.init("img","span");
};
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。