英雄联盟轮播图自动轮播

六月过去了，七月还会远吗？不知不觉到了六月底的最后一天。你好，七月！

大家好，我是小陈陈呀，上次写了一篇英雄联盟轮播图手动轮播，当天晚上有很多大朋友小朋友私信小陈陈：可以在上次手动轮播的基础上，实现自动轮播的话，那样会不会更炫酷呢？炫不炫酷我不知道，但是我们可以实现它🙂。

清除网页的默认距离

/* 清除网页的默认距离*/*{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;}

后代选择器，先找容器，再找内部标签

.banner_nav li{width: 164px;height: 40px;

/* 由于li在网页中属于块元素，独立成行 /
/ 浮动属性，让原本上下排列的li，并排 */

float:left;

清除li前面的列表符号

  list-style:none;

/* 字号是:14px; */
font-size: 14px;/* 文本的水平居中 */
text-align:center;/* 文本垂直居中 单行文本垂直居中，当行高等于当前容器的高度时内部文字垂直居中 */
line-height: 40px;

设置背景颜色

    background-color:#e3e2e2;}.banner_nav .active{
    background-color:white;color:#ab8e66;

边框会增加元素的实际占位

border-bottom: 2px solid #cea861;height: 38px;}

body部分代码

//创建一个div标签，用于编写整个轮播图结构，命令.banner<div class="banner"><!-- 根导航据banner中内容，划分成img区域，以及导航区域,区域div --><div class="banner_img"><!-- banner_img轮播图的显示窗口，只显示一张图片   --><!-- 滚动式轮播图，将图片并排显示   --><!-- 并列结构，无序联表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"><!-- 网页还原过程中，如果需要编写对应的并列结构，直接使用无序列表进行开发ul>li --><ul id="navWrap"><li class="active"id="li1">EDG冠军战队皮肤</li><li id=li2>EDG冠军荣耀宝箱</li><li id=li3>西部魔影2022</li><li id=li4>西部魔影通行证</li><li id=li5>2022西部秘宝</li></ul></div></div><script>

找到对应的事件源:找到五个li标签放入数组中
不推荐document.getElementById(“li”)找li标签

var navWrap=document.getElementById("navWrap")//先找事件源的容器var lis=navWrap.getElementsByTagName("li")//找到navWrap下方所有的livar imgWrap=document.getElementById("imgWrap")

利用循环分发指定的事件

for(var n=0;n<lis.length;n++){
    lis[n].index=n//分发索引值
    lis[n].onmouseenter=function(){// console.log(1)

//清楚其他的选中样式  排他法//先将所有的li的class都清除

for(var j=0;j<lis.length;j++){
       lis[j].className=""}this.className="active"

让指定ul 移动到对应位置 当前元素的索引值 *820
// console.log(this.index)

   imgWrap.style.marginLeft=-820*this.index+"px"}}

每间隔2s,让图片自动滚动一次
在当前图片的基础上,自动轮播到下一张
明确当前是第几张图片？

var index=0//当前图片的索引值

每调用索引值++
每调用一次函数 图片需要自动变化到下一张,如果是最后一张回到第一张

var t1=setInterval(function(){if(index==4){
   index=0}else{
      index++}

滚动指定位置

imgWrap.style.marginLeft=-820*index+"px"

找到指定的导航添加上选中样式

for(var j=0;j<lis.length;j++){
            lis[j].className=""}
    lis[index].className="active"},2000)

当鼠标放入整体的轮播图容器时，定时器终止

var banner=document.getElementById("banner")
banner.onmouseenter=function(){clearInterval(t1)}

鼠标离开banner后,定时器重启

   banner.onmouseleave=function(){
    t1=setInterval(function(){if(index==4){
       index=0}else{
          index++}

滚动指定位置

 imgWrap.style.marginLeft=-820*index+"px"

找到指定的导航添加上选中样式

for(var j=0;j<lis.length;j++){
            lis[j].className=""}
    lis[index].className="active"},2000)}

英雄联盟首页轮播图还原（部分）