英雄联盟轮播图自动轮播

Posted 爱笑的陈sir

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了英雄联盟轮播图自动轮播相关的知识,希望对你有一定的参考价值。

六月过去了,七月还会远吗?不知不觉到了六月底的最后一天。你好,七月!

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

清除网页的默认距离

  /* 清除网页的默认距离*/
  *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下方所有的li
  var 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)
    
   

英雄联盟首页轮播图还原(部分)

JQ轮播图自动轮播效果及bug解决

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             *{margin:0;padding:0;}
  8             #box{width:600px;height:400px;margin:0 auto;position:relative;overflow:hidden;}
  9             #box .con{width:3600px;height:400px;position:absolute;left:0;top:0;}
 10             #box .con img{float:left;}
 11             #box ul{position:absolute;bottom:0;right:0;}
 12             #box ul li{list-style:none;float:left;margin-left:1px;width:80px;height:26px;line-height:26px;
 13                      color:#fff;text-align:center;background:red;opacity:0.7;}
 14                     
 15         </style>
 16         <script src="js/jquery.1.9.1.js" type="text/javascript" charset="utf-8"></script>
 17        <script type="text/javascript">
 18               $(function(){
 19                   //大总管变量默认值为0,即第一项
 20                   var c=0;
 21                   //1代表不能点击,2代表能点击
 22                   var sta=2;
 23                   
 24                   
 25                   //无缝滚动定时器
 26                   function run(){
 27                       c++;
 28                       //当C=6,找到ul,把left重置为0,c为1
 29                   
 30                       if(c==6){ 
 31                           $("#box .con").css({\'left\':\'0\'});
 32                           c=1;
 33                       }
 34                            var l=c*-600; //600为每张图片的宽度
 35                            sta=1;//定时器轮播时,不能点击
 36                          //con元素向左移动,运动前要加stop()
 37                          $("#box .con").animate({"left":l+"px"},400,function(){
 38                              //执行完动画,将sta转为可以点击
 39                              sta=2;
 40                          });
 41                          
 42                              if(c==5){
 43                           $(\'#box ul li\').eq(0).css({\'opacity\':\'0.9\'}).siblings().css({\'opacity\':\'0.7\'});
 44                       }else{
 45                            //让当前的li透明度为0.9,兄弟li为0.7
 46                          $("#box ul li").eq(c).css({\'opacity\':\'0.9\'}).siblings().css({\'opacity\':\'0.7\'});
 47                       }
 48                          
 49                   }
 50                   
 51                    //全局变量timer
 52                    var timer=setInterval(run,1000);
 53                    var t;
 54                    
 55                    
 56                     //给li添加单击切换效果
 57                     $(\'#box ul li\').click(function(){
 58                         if(sta==1){//不能点击
 59                             return; //后面代码不执行,返回
 60                         }
 61                         //清理定时炸弹
 62                         clearTimeout(t);
 63                         //点击时候,先清理定时器
 64                         clearInterval(timer);
 65                       t=setTimeout(function(){
 66                           timer=setInterval(run,2000);
 67                       },400)
 68                          //获得当前被点击li的序号
 69                          c=$(this).index();
 70                          //计算大DIV应该到达的Left的值
 71                          var left=c*-600;
 72                          //con元素向左移动,运动前要加stop()
 73                          
 74                          $("#box .con").stop().animate({"left":left+"px"},300);
 75                          //让当前的li透明度为0.9,兄弟li为0.7
 76                          $(this).css({\'opacity\':\'0.9\'}).siblings().css({\'opacity\':\'0.7\'});
 77                     })
 78               })
 79        </script>
 80     </head>
 81     <body>
 82         <div id="box">
 83             <div class="con">
 84                 <!-- img[src=img/$.jpg]*5 -->
 85                 <img src="img/1.jpg" alt="" />
 86                 <img src="img/2.jpg" alt="" />
 87                 <img src="img/3.jpg" alt="" />
 88                 <img src="img/4.jpg" alt="" />
 89                 <img src="img/5.jpg" alt="" />
 90                 <!--复制一份第一张图片-->
 91                 <img src="img/1.jpg" alt="" /> 
 92             </div><!--end of con-->
 93             <ul>
 94                 <li style="opacity:0.9">包包</li>
 95                 <li>男装</li>
 96                 <li>女装</li>
 97                 <li>男鞋</li>
 98                 <li>女鞋</li>
 99             </ul>
100         </div>
101     </body>
102 </html>

效果图如下:

学习课程网址:http://study.163.com/course/courseLearn.htm?courseId=1003498007#/learn/video?lessonId=1004152564&courseId=1003498007

以上是关于英雄联盟轮播图自动轮播的主要内容,如果未能解决你的问题,请参考以下文章

英雄联盟轮播图手动轮播

jquery简单自动轮播图代码怎么写

jquery 图片轮播 代码啥意思啊

JavaScript实现移动端轮播图效果

jquery自动轮播图代码只能出现一张图片第二三张就空白了 轮播正常播放

jquery图片上下轮播的问题,怎么实现自动轮播?