基于JavaScript實(shí)現(xiàn)頁(yè)面輪播圖漸變效果的示例代碼
在開(kāi)始之前，我們需要準(zhǔn)備一些基本的HTML和CSS。
HTML結(jié)構(gòu)：
<div class="focus ">
<ul class="carousel">
<li class="opa"><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/08/1E/CoNB_WU2Z10Pona2ACzRRnW5ARY.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
<li><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/92/FF/CoNB_GUzmHJqChXuACW_FtT4Ioo.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
<li><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/70/34/CoNFT2Uzk0xJFMtNACnheGMnxbw.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
</ul>
<div class="arrowLeft"><</div> <!-- 左側(cè)按鈕 -->
<div class="arrowRight">></div> <!-- 右側(cè)按鈕 -->
<ol class="disc">
</ol>
</div>
CSS樣式：
.focus {
position: relative;
width: 100%;
height: 500px;
margin-top: 0px;
overflow: hidden;
}
.carousel {
position: relative;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
}
.carousel li {
position: absolute; /*絕對(duì)定位*/
top: 0px;
left: 0px;
opacity: 0;
transition: all 1s; /*設(shè)置切換時(shí)過(guò)渡效果*/
}
.carousel li.opa { /*li和.opa之間,無(wú)空格*/
opacity: 1;
}
.carousel li img {
width: 100%;
height: auto; /*高度自適應(yīng)*/ /*height: 100%; */ /*高度設(shè)為100%會(huì)超出容器高度*/
object-fit: cover; /*圖片自適應(yīng)大小并保持原比例*/
}
.focus div {
display: none;
position: absolute;
top: 50%;
transform: translate(0, -50%); /*上移，使垂直居中*/
width: 36px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 36px;
z-index: 99;
cursor: pointer; /*鼠標(biāo)指針變?yōu)槭中?/
}
.arrowLeft {
left: 10px;
}
.arrowRight {
right: 10px;
}
.arrowLeft:hover,.arrowRight:hover {
background-color: rgba(128, 128, 128, .5);
}
.disc {
position: absolute;
bottom: 0px;
right: 50%;
z-index: 99;
}
.disc li {
display: inline-block;
width: 15px;
height: 15px;
background-color: #ccc;
margin: 0 3px;
border-radius: 50%;
cursor: pointer;
}
.disc li.current { /*li和.current之間,無(wú)空格*/
background-color: #f00;
}
}
現(xiàn)在讓我們開(kāi)始編寫(xiě)JavaScript代碼來(lái)實(shí)現(xiàn)輪播圖漸變效果。
window.addEventListener('load', function () {
var focus = document.querySelector('.focus');
var arrowLeft = document.querySelector('.arrowLeft');
var arrowRight = document.querySelector('.arrowRight');
//鼠標(biāo)移動(dòng)到輪播圖，左右箭頭顯示
focus.addEventListener('mouseover', function() {
arrowLeft.style.display = 'block';
arrowRight.style.display = 'block';
clearInterval(timer); //清除定時(shí)器
timer = null;
})
focus.addEventListener('mouseout', function() {
arrowLeft.style.display = 'none';
arrowRight.style.display = 'none';
timer = setInterval(function() { //鼠標(biāo)離開(kāi)，開(kāi)啟定時(shí)器
arrowRight.click();
}, 3000);
})
var ul = focus.querySelector('ul');
var ol = focus.querySelector('ol');
var num=ul.children.length;
var disc = 0;
//動(dòng)態(tài)生成小圓點(diǎn)
for (let i = 0; i < num; i++) {
var li = document.createElement('li');
ol.appendChild(li);
li.addEventListener('click', function() {
for (let k = 0; k < num; k++) {
ol.children[k].className = '';
ul.children[k].className = '';
}
this.className = 'current';
ul.children[i].className = 'opa';
disc = i;
})
}
ol.children[0].className ='current';
//點(diǎn)擊右側(cè)箭頭
arrowRight.addEventListener('click', function() {
disc++; //圓點(diǎn)樣式
if (disc == num) {
disc = 0;
}
for (let k = 0; k < num; k++) {
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[disc].className = 'current';
ul.children[disc].className = 'opa';
})
// 點(diǎn)擊左側(cè)按鈕
arrowLeft.addEventListener('click', function() {
disc--;
if (disc < 0) {
disc = num - 1;
}
for (let k = 0; k < num; k++) {
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[disc].className = 'current';
ul.children[disc].className = 'opa';
})
//自動(dòng)播放，像點(diǎn)擊右側(cè)按鈕
var timer = setInterval(function() {
arrowRight.click();
}, 3000);
})
讓我們來(lái)解釋一下代碼的實(shí)現(xiàn)邏輯：
1. 首先，代碼通過(guò)window.addEventListener('load', function () {...})監(jiān)聽(tīng)頁(yè)面加載完成的事件，這保證了代碼在頁(yè)面元素加載完畢后執(zhí)行。
2. 代碼使用querySelector方法獲取了輪播圖的相關(guān)元素，包括輪播圖容器、左箭頭和右箭頭。
3. 鼠標(biāo)移動(dòng)到輪播圖容器上時(shí)，觸發(fā)mouseover事件的回調(diào)函數(shù)。在回調(diào)函數(shù)中，左右箭頭的display屬性被設(shè)置為block，即顯示出來(lái)。同時(shí)，通過(guò)調(diào)用clearInterval清除定時(shí)器timer，并將其置為null，實(shí)現(xiàn)停止自動(dòng)播放。
4. 鼠標(biāo)移出輪播圖容器時(shí)，觸發(fā)mouseout事件的回調(diào)函數(shù)。在回調(diào)函數(shù)中，左右箭頭的display屬性被設(shè)置為none，即隱藏起來(lái)。通過(guò)調(diào)用setInterval設(shè)置定時(shí)器timer，每隔3秒點(diǎn)擊一次右箭頭，實(shí)現(xiàn)自動(dòng)播放。
5. 代碼通過(guò)querySelector方法獲取輪播圖容器中的ul和ol元素，分別代表圖片列表和圓點(diǎn)列表。
6. 通過(guò)變量num獲取圖片列表中的子元素?cái)?shù)量。
7. 使用for循環(huán)遍歷圖片列表的子元素?cái)?shù)量，動(dòng)態(tài)生成與圖片數(shù)量相同的圓點(diǎn)，并將其添加到圓點(diǎn)列表中。同時(shí)為每個(gè)圓點(diǎn)添加點(diǎn)擊事件的回調(diào)函數(shù)，在回調(diào)函數(shù)中處理圓點(diǎn)點(diǎn)擊切換圖片的邏輯。
8. 默認(rèn)將第一個(gè)圓點(diǎn)添加current類(lèi)名，表示當(dāng)前活動(dòng)圓點(diǎn)。
9. 當(dāng)點(diǎn)擊右側(cè)箭頭時(shí)，觸發(fā)click事件的回調(diào)函數(shù)。在回調(diào)函數(shù)中，圓點(diǎn)的樣式進(jìn)行更新，通過(guò)添加和刪除current類(lèi)名來(lái)實(shí)現(xiàn)圓點(diǎn)的樣式切換。同時(shí)，圖片的樣式也進(jìn)行更新，通過(guò)添加和刪除opa類(lèi)名來(lái)實(shí)現(xiàn)圖片的切換。
10. 當(dāng)點(diǎn)擊左側(cè)箭頭時(shí)，觸發(fā)click事件的回調(diào)函數(shù)。邏輯與點(diǎn)擊右側(cè)箭頭類(lèi)似，只是圓點(diǎn)和圖片的切換順序相反。
11. 最后，通過(guò)設(shè)置定時(shí)器timer實(shí)現(xiàn)自動(dòng)播放功能。定時(shí)器每隔3秒點(diǎn)擊一次右側(cè)箭頭，從而切換到下一張圖片。
通過(guò)以上代碼的實(shí)現(xiàn)，我們成功地實(shí)現(xiàn)了采用JavaScript的頁(yè)面輪播圖漸變效果。
到此這篇關(guān)于基于JavaScript實(shí)現(xiàn)頁(yè)面輪播圖漸變效果的示例代碼的文章就介紹到這了,更多相關(guān)JavaScript實(shí)現(xiàn)頁(yè)面輪播圖漸變內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
javascript實(shí)現(xiàn)當(dāng)前頁(yè)導(dǎo)航激活的方法
bootstrap table實(shí)現(xiàn)點(diǎn)擊翻頁(yè)功能 可記錄上下頁(yè)選中的行
JS實(shí)現(xiàn)5秒鐘自動(dòng)封鎖div層的方法
JS使用canvas中的measureText方法測(cè)量字體寬度示例
微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)方法
微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)