滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)

最新推荐文章于 2024-09-20 11:38:47 发布

油、东西

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量171

点赞数 1

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/ZZY192921533/article/details/124881078

版权

滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)

每一步都有详细的注释:

<!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>滚动式轮播图</title>
  <style>
  *{
      margin: 0;
      padding: 0;
    }
    #wrap{
      width: 820px;
      height: 380px;
    }
   #wrap .picBox{
    width: 820px;
    height: 340px;
    overflow:hidden;
    cursor: pointer;
   }
   #picBox{
     width: 4100px;
     height: 340px;
     transition: all 0.5s;
   }
   #picBox li{
    float: left;
    list-style: none;
   }
   #picBox li img{
     display: block;
   }
   #picNav li{
     width: 164px;
     height: 40px;
     float: left;
     list-style: none;
     line-height: 40px;
     text-align: center;
     font-size: 14px;
     background-color: #e3e2e2;
   }
   #picNav .active{
     border-bottom: 2px #cea861 solid;
     background-color: white;
     height: 38px;
     color: #ab8e66;
   }
  </style>
</head>
<body>
  <div id="wrap">
     <div class="picBox">
      <ul id="picBox">
        <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/5fa9fbc22102906860ed52cb134cf17b.jpeg" alt=""></li>
        <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220520/f78ff7cf8d4834691e77e522c09d08e2.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/20220520/6ea76860fc248720799f9a0784a79db2.jpeg" alt=""></li>
      </ul>
     </div>
     <div class="picNav">
      <ul id="picNav">
        <li class="active">EDG冠军战队皮肤</li>
        <li>西部影魔2022</li>
        <li>520MSI赛程</li>
        <li>EDG冠军荣耀宝箱</li>
        <li>520情人节周边</li>
      </ul>
     </div>
  </div>
  <script>
    // 找到对应的picNav标签
       var picNav=document.getElementById("picNav")
       // 找到这个标签里的所有li标签
       var picNavLis=picNav.getElementsByTagName("li")
       var index=0 //图面默认的索引值
      function change(){     //创建一个定时器,让轮播图完成自动轮播
        console.log(1)
         if(index==4){  //当索引值等于4的时候
           index=0      //让索引值回到0,进行一个0~4的循环
         }else{
          index++       //如果index!=4,那么他就递增一次,开始0~4的循环
         }
         // 排他思想: 先将pinNavLis中的所有li标签通过for循环全部清空样式
         for(var n=0;n<picNavLis.length;n++){
           picNavLis[n].className=""
         }
         // 在当前自动轮播到[this.index]的轮播图上添加一个active的样式
         picNavLis[this.index].className="active"
         // 在用来展示图片的位置添加一个marginLeft的样式,用当前li的索引值this.index*(-820)+"px"用来完成 录播图的切换
         picBox.style.marginLeft=-this.index*820+"px"
       }
       var t=setInterval(change,2500)   //调用定时器,来完成轮播都每隔2.5s就自动轮播一次
       // for循环给每个li标签分发事件
       for(var n=0;n<picNavLis.length;n++){
         // 给每个li分发一个属性 鼠标进入li后再控制台返回
         // console.log(this.index)控制台返回这个li是第几个li
        picNavLis[n].index=n
        picNavLis[n].onmouseenter=function(){
          // 排他思想:先将所有样式清空
          for(var j=0;j<picNavLis.length;j++){
            picNavLis[j].className=""
          }
          // 鼠标进入那个li就给那个li分发样式
          picNavLis[this.index].className="active"
          // 由于picBox的宽度是4100px,使用了overflow:hidden;除了第一张图片全都隐藏
          // 鼠标移入任意标签输出当前标签的索引值
          console.log(this.index)
          // 设置指定标签的样式.style        为了移动轮播图到指定位置,让当前li的索引值*820+"px"
          picBox.style.marginLeft=-this.index*820+"px"
          index=this.index// 让图片和自动轮播对应上,让index等与当前鼠标进入的那个li标签
                          // 就会继续在这个this.index标签后边继续轮播     
        }
       }
       // 找到这个放置轮播图的大div
       var wrap=document.getElementById("wrap")
       // 当鼠标进入这个轮播图时,终止自动轮播
       wrap.onmouseenter=function(){
          clearInterval(t)
       }
       // 当鼠标离开轮播图时候,开始自动轮播
       wrap.onmouseleave=function(){
         t=setInterval(change,2500)
       }
  </script>
</body>
</html>