前端：HTML+CSS+JavaScript實現輪播圖
2021-12-31 13:00:04
1. 最簡單的輪播圖
效果如下：
這個實現非常簡單，就是使用相對定位和絕對定位，將這三張圖片壓在一塊。然後搞一個定時器，當到下一張圖片的時候，把當前這張圖片相應的標籤上設定它的屬性display,把它設定為none，之後把下一張圖片相應的標籤上設定它的屬性display的值為block即可。(當然也可以設定屬性z-index的值，總之實現方式還是很多。)
實現程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>輪播圖_1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.carousel{
width: 509px;
height: 212px;
margin: 0 auto;
position: relative;
/*去掉li標籤前面的圖示*/
}
.carousel ul:nth-of-type(1){
width: 100%;
height: 100%;
position: relative;
}
.carousel ul:nth-of-type(1) li{
position: absolute;
top: 0;
left: 0;
}
.carousel ul:nth-of-type(1) li img{
width: 509px;
height: 212px;
}
.active{
display: block;
}
.btn_at{
background-color: gold;
}
.btn_unat{
background-color: white;
}
.unactive{
display: none;
}
.carousel button{
color: black;
position: absolute;
height: 100%;
font-size: 25px;
font-weight: bold;
background-color: transparent;
border-width: 0;
color: white;
display: none;
}
.carousel .left_btn{
top: 0;
left: 0;
}
.carousel .right_btn{
top: 0;
right: 0;
vertical-align: middle;
}
.carousel ul:nth-of-type(2){
position: absolute;
bottom: 6px;
width: 16%;
height: 5%;
left: 42%;
}
.carousel ul:nth-of-type(2) li{
float: left;
border-radius: 100%;
width: 8px;
height: 8px;
margin: 2px 10.7%;
}
</style>
</head>
<body>
<div class="carousel">
<ul id="imgs">
<li class="active">
<img src="https://csdnimg.cn/feed/20211213/5efbdefd5fe3fbdb332cba3d8a86d445.jpg" alt="">
</li>
<li class="unactive">
<img src="https://csdnimg.cn/feed/20211206/3b9fe6ae0a624ee0fc611cf9328d8876.jpg" alt="">
</li>
<li class="unactive">
<img src="https://csdnimg.cn/feed/20211221/cfbbeec83cf3af3549c3f932db89e0f3.jpg" alt="">
</li>
</ul>
<button class="left_btn">
<
</button>
<!-- 向左按鈕 -->
<button class="right_btn">
>
</button>
<!-- 向右按鈕 -->
<!-- 輪播圖下面的小圓點 -->
<ul id="btns">
<li class="btn_at"></li>
<li class="btn_unat"></li>
<li class="btn_unat"></li>
</ul>
</div>
<script>
var img_index = 0
var lis_1 = document.querySelectorAll("#imgs li")
var lis_2 = document.querySelectorAll("#btns li")
var left_btn = document.querySelector(".left_btn")
var right_btn = document.querySelector('.right_btn')
var carousel = document.querySelector('.carousel')
var timeId
function clear_img(){
lis_1.forEach(function(ele){
ele.className='unactive'
})
}
function clear_btn(){
lis_2.forEach(function(ele){
ele.className='btn_unat'
})
}
function changePicture1(){
img_index++
if(img_index>2){
img_index=0
}
clear_img()
clear_btn()
lis_1[img_index].className='active'
lis_2[img_index].className='btn_at'
}
function changePicture2(){
img_index--
if(img_index<0){
img_index=2
}
clear_img()
clear_btn()
lis_1[img_index].className='active'
lis_2[img_index].className='btn_at'
}
timeId = setInterval(changePicture1,3000)
function stop(){
clearInterval(timeId)
}
function start(){
timeId = setInterval(changePicture1,3000)
}
lis_2.forEach((ele,index)=>{
ele.onclick=function(){
stop()
clear_btn()
clear_img()
lis_1[index].className='active'
lis_2[index].className='btn_at'
img_index = index
}
})
left_btn.onclick=function(){
stop()
changePicture2()
}
right_btn.onclick=function(){
stop()
changePicture1()
}
carousel.addEventListener('mouseover',function(){
left_btn.style.display='block'
right_btn.style.display='block'
this.style.opacity=0.5
},false)
carousel.addEventListener('mouseout',function(){
left_btn.style.display='none'
right_btn.style.display='none'
this.style.opacity=1
},false)
window.addEventListener('blur',()=>{
stop()
console.log('終止監聽')
},false)
window.addEventListener('focus',()=>{
start()
console.log('開始監聽')
},false)
</script>
</body>
</html>
2. 具有滑動效果的輪播圖
因為用js實現這個效果，每次移動畫素點只有1，所有讀者看到上述圖片效果並不怎麼好，如果把js相應的實現部分改一改，這個效果和CSDN官網輪播圖效果還是有的一比的
其實實現這個效果，就是把這三張圖片放在一個盒子內部(div)，當然還是用到相對定位和絕對定位，只不過它們不是壓在一塊，而是橫排在一行上，當然每一張圖片相應的標籤的屬性left的值不是相同的。
window.onload=function(){
lis_1.forEach((ele,index)=>{
ele.style.left=509*index+'px'
})
}
上述程式碼就是實現每一張圖片相應的標籤的屬性left的值不是相同的。
實現圖片滑動效果需要用到兩個定時器，外部的定時器，用於實現圖片滑動之後休眠效果，內部定時器實現圖片滑動效果。
兩個定時器的實現程式碼如下：
function remover_1(){
lis_1.forEach((ele,index)=>{
var left_value = parseFloat(ele.style.left)
left_value-=1
var width = 509
if(left_value<=-width){
left_value = (lis_1.length-1)*509
clearInterval(removeId)
lis_2[index].className='unactive'
lis_2[(index+1)%3].className='active'
ele_index=(index+1)%3
}
ele.style.left = left_value+'px'
})
}
function remover_2(){
removeId = setInterval(remover_1,1)
}
timeId = setInterval(remover_2,5000)
另外，還需要設定監聽，如果不設定，就會存在一個BUG，就是離開瀏覽器之後很久，然後再來看這個輪播圖的效果，你會發現，那些圖片向左邊滑動太快了。
window.addEventListener('focus',()=>{
start()
console.log('開始監聽')
},false)
window.addEventListener('blur',()=>{
stop()
console.log('取消監聽')
},false)
下邊小圓點和左右點選按鈕實現效果需要注意相應的邏輯，小編在這裡就不一一講解了。因為實現程式碼有點多，小編在這裡就貼出來，有興趣的讀者可以到小編這裡來下載哈！下載連結為：https://download.csdn.net/download/qq_45404396/71987933
3. 具有滑動效果且三張圖片同時顯示
實現效果如下：
因為在CSDN上上傳圖片最大隻能5MB,上述圖片其實是小編經過處理的，其實原本效果沒有滑動這麼快。
實現這個效果和小編上述第二點講到那個輪播圖實現原理基本一樣，但是這裡顯示了三張圖片，為了讓輪播效果和實現相符，佈局方面有一點不一樣，用到了6張圖片(其實主要是3張圖片，另外三張圖片基本重複前面三張圖片)，如下：
這個程式碼也有點多，就不貼出來了，想要的讀者可以到看第二點最後面的那個連結。