前面有分享過改變層級的輪播圖演算法，今天繼續利用透明度來實現無位移的輪播圖演算法。 實現邏輯：將所有要輪播的圖片全部定位到一起，即一層一層摞起來，並且利用層級的屬性調整正確的圖片順序，將圖片的透明度全部設置為0，然後在讓初始的第一張圖片的透明度為1即可，具體演算法如下： <!DOCTYPE html><h ...
前面有分享過改變層級的輪播圖演算法，今天繼續利用透明度來實現無位移的輪播圖演算法。
實現邏輯：將所有要輪播的圖片全部定位到一起，即一層一層摞起來，並且利用層級的屬性調整正確的圖片順序，將圖片的透明度全部設置為0，然後在讓初始的第一張圖片的透明度為1即可，具體演算法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改變透明度演算法(經典)</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 60%;
margin: auto;
position: relative;
}
.wrap img {
width: 100%;
position: absolute;
left: 0;
top: 0;
transition: 2s;
}
.wrap img:nth-child(1) {
position: relative;
}
.wrap .follow {
width: 150px;
height: 30px;
margin: auto;
display: flex;
justify-content: space-between;
}
.wrap .follow span {
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid gray;
}
.wrap .follow span:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
<input id="leftBut" type="button" name="name" value="◀︎">
<input id="rightBut" type="button" name="name" value="▶︎">
<div class="follow">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script type="text/javascript">
// 獲取所需元素
var images = document.querySelectorAll('.wrap img');
var spans = document.querySelectorAll('.follow span');
var leftBut = document.getElementById('leftBut');
var rightBut = document.getElementById('rightBut');
// 定義有參函數
function showImage(index) {
for (var i = 0; i < images.length; i++) {
spans[i].index = i;//自定義屬性，得到對應的下標
images[i].index = i;//自定義屬性，得到對應的下標
images[i].style.zIndex = 100 - i;//為圖片排列順序
images[i].style.opacity = '0';//將圖片透明度全部賦值為0
spans[i].style.background = 'gray';//圓點北京色全部設置為黑色
}
//將傳入參數下標值的圖片透明度賦值為 1
images[index].style.opacity = '1';
//將傳入參數下標值的圖片的背景色賦值為white
spans[index].style.background = 'white';
}
showImage(0);//初始設置下標為0的圖片和圓點的樣式
var count = 1;//獲取計數器
// 定義自動輪播函數
function imageMove() {
// 判斷count的值如果能被4整除，則將count重新賦值為0；
if (count % 4 == 0) {
count = 0;
}
// 將count值當做參數傳給函數showImage();
showImage(count);
count++;//執行一次 ＋1
}
// 設置兩秒調用一次函數imageMove()，並且賦值給imageInitailMove
var imageInitailMove = setInterval('imageMove()', 2000);
// 向左點擊事件
leftBut.onclick = function() {
// 先清除定時器
clearInterval(imageInitailMove);
// 由於和自動輪方向相反所以要判斷count的值當值為0時，重新賦值為4，繼續迴圈
if (count == 0) {
count = 4;
}
count--;
showImage(count);//調用函數count先自－
imageInitailMove = setInterval('imageMove()', 2000);
}
// 向右的點擊事件
rightBut.onclick = function() {
clearInterval(imageInitailMove);
imageMove();//由於和自動輪播的方向相同所以直接調用
// 重新為定時器賦值
imageInitailMove = setInterval('imageMove()', 2000);
}
// 圓點的點擊事件
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
clearInterval(imageInitailMove);
// 將當前點擊的圓點的下標值賦值給count
count = event.target.index;
// 調用函數
showImage(count);
imageInitailMove = setInterval('imageMove()', 2000);
}
}
</script>
</html>
