六月過去了，七月還會遠嗎？不知不覺到了六月底的最后一天。你好，七月！
大家好，我是小陳陳呀，上次寫了一篇英雄聯(lián)盟輪播圖手動輪播，當(dāng)天晚上有很多大朋友小朋友私信小陳陳：可以在上次手動輪播的基礎(chǔ)上，實現(xiàn)自動輪播的話，那樣會不會更炫酷呢？炫不炫酷我不知道，但是我們可以實現(xiàn)它??。
清除網(wǎng)頁的默認距離
/* 清除網(wǎng)頁的默認距離*/
*{margin:0;
padding:0;
}
.banner{
width: 820px;
height: 380px;
background-color:blue;
}
.banner_img ul{
width: 4100px;
過渡動畫
/* 過渡動畫 */
transition:all 0.2s;
}
圖片大小長度，寬度，顏色，邊距
.banner_img{
width: 820px;
height: 340px;
background-color:red;
overflow:hidden;
}
.banner_img li{
width: 820px;
height: 380px;
float:left;
清除li前面的列表符號
list-style:none
}
.banner_nav{
width: 820px;
height: 40px;
background-color:green;
}
后代選擇器，先找容器，再找內(nèi)部標(biāo)簽
.banner_nav li{
width: 164px;
height: 40px;
/* 由于li在網(wǎng)頁中屬于塊元素，獨立成行 /
/ 浮動屬性，讓原本上下排列的li，并排 */
float:left;
清除li前面的列表符號
list-style:none;
/* 字號是:14px; */
font-size: 14px;
/* 文本的水平居中 */
text-align:center;
/* 文本垂直居中 單行文本垂直居中，當(dāng)行高等于當(dāng)前容器的高度時內(nèi)部文字垂直居中 */
line-height: 40px;
設(shè)置背景顏色
background-color:#e3e2e2;
}
.banner_nav .active{
background-color:white;
color:#ab8e66;
邊框會增加元素的實際占位
border-bottom: 2px solid #cea861;
height: 38px;
}
body部分代碼
//創(chuàng)建一個div標(biāo)簽，用于編寫整個輪播圖結(jié)構(gòu)，命令.banner
<div class="banner">
<!-- 根導(dǎo)航據(jù)banner中內(nèi)容，劃分成img區(qū)域，以及導(dǎo)航區(qū)域,區(qū)域div -->
<div class="banner_img">
<!-- banner_img輪播圖的顯示窗口，只顯示一張圖片 -->
<!-- 滾動式輪播圖，將圖片并排顯示 -->
<!-- 并列結(jié)構(gòu)，無序聯(lián)表ul>li -->
<!-- 需要給容器ul添加寬度，可以盛放五個元素并排顯示 -->
<ul id="imgWrap">
<li>
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/1880117fcca33efc8c78ca9710544c12.jpeg"alt="">
</li>
<li>
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/251c4edc9aba721754a63c291a04f826.jpeg"alt="">
</li>
<li>
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/5fa9fbc22102906860ed52cb134cf17b.jpeg"alt="">
</li>
<li>
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/1850af58906b7be093c3f0fee9177d71.jpeg"alt="">
</li>
<li>
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/4dfbd939f2401ca8095cc7c679355618.jpeg"alt="">
</li>
</ul>
</div>
<div class="banner_nav">
<!-- 網(wǎng)頁還原過程中，如果需要編寫對應(yīng)的并列結(jié)構(gòu)，直接使用無序列表進行開發(fā)ul>li -->
<ul id="navWrap">
<li class="active"id="li1">EDG冠軍戰(zhàn)隊皮膚</li>
<li id=li2>EDG冠軍榮耀寶箱</li>
<li id=li3>西部魔影2022</li>
<li id=li4>西部魔影通行證</li>
<li id=li5>2022西部秘寶</li>
</ul>
</div>
</div>
<script>
找到對應(yīng)的事件源:找到五個li標(biāo)簽放入數(shù)組中
不推薦document.getElementById(“l(fā)i”)找li標(biāo)簽
var navWrap=document.getElementById("navWrap")//先找事件源的容器
var lis=navWrap.getElementsByTagName("li")//找到navWrap下方所有的li
var imgWrap=document.getElementById("imgWrap")
利用循環(huán)分發(fā)指定的事件
for(var n=0;n<lis.length;n++){
lis[n].index=n//分發(fā)索引值
lis[n].onmouseenter=function(){
// console.log(1)
//清楚其他的選中樣式 排他法
//先將所有的li的class都清除
for(var j=0;j<lis.length;j++){
lis[j].className=""
}
this.className="active"
讓指定ul 移動到對應(yīng)位置 當(dāng)前元素的索引值 *820
// console.log(this.index)
imgWrap.style.marginLeft=-820*this.index+"px"
}
}
每間隔2s,讓圖片自動滾動一次
在當(dāng)前圖片的基礎(chǔ)上,自動輪播到下一張
明確當(dāng)前是第幾張圖片？
var index=0 //當(dāng)前圖片的索引值
每調(diào)用索引值++
每調(diào)用一次函數(shù) 圖片需要自動變化到下一張,如果是最后一張回到第一張
var t1=setInterval(function(){
if(index==4){
index=0
}else{
index++
}
滾動指定位置
imgWrap.style.marginLeft=-820*index+"px"
找到指定的導(dǎo)航添加上選中樣式
for(var j=0;j<lis.length;j++){
lis[j].className=""
}
lis[index].className="active"
},2000)
當(dāng)鼠標(biāo)放入整體的輪播圖容器時，定時器終止
var banner=document.getElementById("banner")
banner.onmouseenter=function(){
clearInterval(t1)
}
鼠標(biāo)離開banner后,定時器重啟
banner.onmouseleave=function(){
t1=setInterval(function(){
if(index==4){
index=0
}else{
index++
}
滾動指定位置
imgWrap.style.marginLeft=-820*index+"px"
找到指定的導(dǎo)航添加上選中樣式文章來源：http://www.zghlxwxcb.cn/news/detail-403907.html
for(var j=0;j<lis.length;j++){
lis[j].className=""
}
lis[index].className="active"
},2000)
}
英雄聯(lián)盟首頁輪播圖還原（部分）文章來源地址http://www.zghlxwxcb.cn/news/detail-403907.html
到了這里，關(guān)于英雄聯(lián)盟輪播圖自動輪播的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
