通過對img opacity樣式的修改，達到對img顯隱的控制，從而形成輪播 ...
前兩天同事面試新人，讓現場寫”輪播的實現”。我一想這玩意貌似我也沒寫過啊，就在旁邊暗搓搓地拖了一張紙也在那寫，同事都納悶了！
這玩意實現方法有很多種，就看喜歡那種，喜歡怎麼寫而已。我這裡是通過對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" 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: 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>
