前端：HTML+CSS+JavaScript實現輪播圖2
- 1. 和之前版本的區別
- 2. 實現原理
- 3. 針對上述的改進
- 3. 參考代碼
1. 和之前版本的區別
之前發布的那篇關于輪播圖的文章在這：前端：HTML+CSS+JavaScript實現輪播圖，只能說存在問題吧！比如2、3實現效果是用了兩個定時器實現的，雖然也達到了那種效果，但是從一些方面來說總有點繁瑣吧！比如，在一定時間內圖片移動像素的計算等。現在這個不需要計算，直接用一個定時器即可實現，我想說現在這個版本和各位在瀏覽器上看到那種效果實現原理應該差不多。
雖然沒有給出相應的點擊事件哈！
2. 實現原理
利用相對定位relative、絕對定位absolute、定時器、transition
結合relative、absolute來進行圖片布局，用定時器來實現圖片輪播間隔效果，用transition來實現每張圖片移動過渡效果。
初始實現效果如上，這不符合我們想要的那種效果，這種是通過定時器每隔幾秒變化每張圖片的left的值的效果。這并不怎么美觀，因為圖片過渡效果并不符合我們的要求，但是如果顯示的有多張圖片，那么倒還不錯，如下：
3. 針對上述的改進
就是把所有圖片從左到右進行排列，外層用一個標簽元素包裹，每隔一段時間變換外層的標簽元素的left屬性值。
3. 參考代碼
這個是需要改進的代碼哈！
main.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="./main.css">
</head>
<body><div class="main"></div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>
main.css
*{padding: 0;margin: 0;
}ul{list-style: none;
}.main{width: 500px;height: 300px;margin: 0 auto;position: relative;
}.dot{height: 10px;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);
}.dot span{height: 100%;float: left;width: 10px;border-radius: 50%;margin-left: 10px;cursor: pointer;
}.dot span:first-child{margin-left: 0;
}.red{background-color: red;
}.white{background-color: white;
}.main ul{position: relative;height: 100%;width: 100%;overflow-x: hidden;
}.main ul li{position: absolute;top: 0;transition: all 0.3s;width: 100%;height: 100%;
}.main ul li img{width: 100%;
}
main.js
// 輸入圖片鏈接數組
const img_arr = ['https://i0.hdslb.com/bfs/banner/627984a9617a35c7e4366e0c74baf29ef3aa96ae.png@976w_550h_1c_!web-home-carousel-cover.avif','https://i0.hdslb.com/bfs/banner/3464f3b055107b2b54b9443e02c43448c0915866.png@976w_550h_1c_!web-home-carousel-cover.avif','https://i0.hdslb.com/bfs/banner/ff7d11c786ddd45c218696c3c6b19c69a71883d7.jpg@976w_550h_1c_!web-home-carousel-cover.avif','https://i0.hdslb.com/bfs/sycp/creative_img/202311/74214ce12c94ba104322e2be463ec6f7.jpg@976w_550h_1c_!web-home-carousel-cover.avif'
];const mainEle = document.querySelector('.main');
var _htmlStr = '';
img_arr.forEach(function(ele){_htmlStr += `<li><img src="${ele}"></li>`
})var _htmlStr2 = '';
for(let i=0;i<img_arr.length;i++){_htmlStr2 += '<span></span>'
}var _htmlStr2 = `<div class="dot">${_htmlStr2}</div>`;
_htmlStr = `<ul>${_htmlStr}</ul>${_htmlStr2}`;mainEle.innerHTML = _htmlStr;const img_width = 500;const elements = document.querySelectorAll('.main ul li');
const elements2 = document.querySelectorAll('.dot span');
elements.forEach(function(ele,index){ele.style.left = index * img_width + 'px';
})elements2.forEach(function(ele,index){if(index == 0){ele.className = 'red';}else{ele.className = 'white';}
})function left(){elements.forEach(function(ele,index){let left_v = parseFloat(ele.style.left);if(left_v - img_width < 0){ele.style.left = (elements.length - 1) * img_width + 'px';}else{ele.style.left = left_v - img_width + 'px';}if(left_v - img_width == 0){elements2[index].className = 'red';}else{elements2[index].className = 'white';}})
}var timer = setInterval(left,2000);這個是改進版本
main.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="./main.css">
</head>
<body><div class="main"><div class="pre_ul" id="main"><ul><li><img src="https://i1.hdslb.com/bfs/archive/da52b26129a84aa316383d53e596d3f89c708294.jpg@672w_378h_1c_!web-home-common-cover.avif" alt=""></li><li><img src="https://i0.hdslb.com/bfs/archive/6df10d7e0834f8511ea620dbfe6bfc7b1eabdab2.jpg@672w_378h_1c_!web-home-common-cover.avif" alt=""></li><li><img src="https://i0.hdslb.com/bfs/archive/47338bc6056b6bbc906155590c6e201ae5dffee8.jpg@672w_378h_1c_!web-home-common-cover.avif" alt=""></li></ul></div><div class="dot" id="main"><span class="red"></span><span class="white"></span><span class="white"></span></div></div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>
main.css
*{margin: 0;padding: 0;
}ul{list-style: none;
}.main{width: 500px;height: 300px;position: relative;margin: 0 auto;overflow-x: hidden;
}.main .dot{position: absolute;bottom: 8%;left: 50%;transform: translateX(-50%);height: 12px;z-index: 2;
}.dot span{float: left;height: 100%;width: 12px;border-radius: 50%;cursor: pointer;margin-left: 8px;
}.dot span:first-child{margin-left: 0;
}.white{background-color: white;
}.red{background-color: red;
}.main .pre_ul{height: 100%;position: absolute;top: 0;left: 0;transition: all 0.5s;z-index: 1;
}.main .pre_ul ul{width: 100%;height: 100%;position: relative;overflow-x: hidden;
}.main .pre_ul ul li{height: 100%;position: absolute;top: 0;left: 0;
}.main .pre_ul ul li img{width: 100%;
}main.js
const img_width = 500;
// 圖片最大寬度
const eles = document.querySelectorAll('.pre_ul ul li');
const pre_ul_ele = document.querySelector('.pre_ul');
const dots = document.querySelectorAll('.dot span');
const n = eles.length;
pre_ul_ele.style.left = 0;
pre_ul_ele.style.width = n * img_width + 'px';
eles.forEach(function(ele,index){ele.style.width = img_width + 'px';ele.style.left = index * img_width + 'px';
})function clear_red(){dots.forEach(function(ele,index){ele.className = 'white';})
}var start_index = 0;function left(){pre_ul_ele.style.transition = 'all 0.5s';let left_v = parseInt(pre_ul_ele.style.left);pre_ul_ele.style.left = left_v - 500 + 'px';clear_red();start_index = (start_index+1)%n;dots[start_index].className = 'red';if(left_v - 500 == -n*img_width){pre_ul_ele.style.left = 0;}
}var timer1 = setInterval(left,2000);注：上述代碼沒有給出點擊按鈕變化圖片特效，想實現的讀者可以去看看上述第一個關于實現輪播圖的版本哈！
![0基礎學java-day16-(坦克大戰[1])](http://pic.xiahunao.cn/0基礎學java-day16-(坦克大戰[1]))
