英雄联盟轮播图手动轮播

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"

   


可以相互对比一下,差距有点大

小项目完整源码:

<!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>lol轮播图展示效果</title>
  <style>
  /* 清除网页的默认距离   */
  *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;
    
  </style>
</head>
<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"

        
       
     //js事件编程:1.事件源 2.事件 3.事件处理函数
     //事件源:五个li
     //事件:鼠标进入事件   onmouseenter
     //数据处理函数:对应的li标签添加上选中样式,图片滚动到指定区域
     //通过id找到对应的元素
     //找到五个事件源
    //  var li1=document.getElementById("li1")
    //  var li2=document.getElementById("li2")
    //  var li3=document.getElementById("li3")
    //  var li4=document.getElementById("li4")
    //  var li5=document.getElementById("li5")
    //  var imgWarp=document.getElementById("imgWarp")  //找到当前需要移动的ul标签
    //  //当鼠标进入第一个li时
    //  li1.οnmοuseenter=function()
    //    //console.log(1)
    //    //需要给自己添加选中的样式,class=active
    //    //js中如何设置类名
    //    li1.className="active"
    //    //将除了自己以外所有的li的选中样式  全部清除  
    //   li2.className=""
    //   li3.className=""
    //   li4.className=""
    //   li5.className=""
    //  //当鼠标进入第一个li时,ul的margin-left 为0px
    //  //设置指定的标签  样式
    //  imgWarp.style.marginLeft="0px"

    //   
     
    //  //当鼠标进入 第二个li时
    //  li2.οnmοuseenter=function()
    //    //console.log(1)
    //    //需要给自己添加选中的样式,class=active
    //    //js中如何设置类名
    //    li2.className="active"
    //    //将除了自己以外所有的li的选中样式  全部清除  
    //   li1.className=""
    //   li3.className=""
    //   li4.className=""
    //   li5.className=""
    //   //当鼠标进入第二个li时,ul的margin-left 为-820px
    //   imgWarp.style.marginLeft="-820px"

    //  
    // //当鼠标进入第三个li时
    // li3.οnmοuseenter=function()
    //    //console.log(1)
    //    //需要给自己添加选中的样式,class=active
    //    //js中如何设置类名
    //    li3.className="active"
    //    //将除了自己以外所有的li的选中样式  全部清除  
    //   li1.className=""
    //   li2.className=""
    //   li4.className=""
    //   li5.className=""
    //   //当鼠标进入第三个li时,ul的margin-left 为-1640px
    //   imgWarp.style.marginLeft="-1640px"

    //  
    //  //当鼠标进入第四个li时
    //  li4.οnmοuseenter=function()
    //    //console.log(1)
    //    //需要给自己添加选中的样式,class=active
    //    //js中如何设置类名
    //    li4.className="active"
    //    //将除了自己以外所有的li的选中样式  全部清除  
    //   li1.className=""
    //   li3.className=""
    //   li2.className=""
    //   li5.className=""
    //   //当鼠标进入第四个li时,ul的margin-left 为-2460px
    //  imgWarp.style.marginLeft="-2460px"

    //  
    //  //当鼠标进入第五个li时
    //  li5.οnmοuseenter=function()
    //    //console.log(1)
    //    //需要给自己添加选中的样式,class=active
    //    //js中如何设置类名
    //    li5.className="active"
    //    //将除了自己以外所有的li的选中样式  全部清除  
    //   li1.className=""
    //   li3.className=""
    //   li4.className=""
    //   li2.className=""
    //   //当鼠标进入第三个li时,ul的margin-left 为-3280px
    //   imgWarp.style.marginLeft="-3280px"
    //  
   </script>  
</body>
</html>
<!-- ps工具
1.标尺  ctrl+r
2.移动工具 v 用于移动标尺线
3.放大镜工具 z
4.抓手工具  按住空格键
5.切片工具 ps 工具栏第五个
6.吸管工具 I -->

原来script里面的代码大约需用90多行甚至更多
但是这次利用循环分发指定的事件的方法不超过15行
工程量足足减少一半,大大提高了效率,减小了工作量。

成品效果展示:

英雄联盟轮播图

英雄联盟轮播图自动轮播

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

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

清除网页的默认距离

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

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

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

静态英雄联盟轮播图布局

纯前端实现—手动轮播图

纯前端实现—手动轮播图

Web前端原生JavaScript浅谈轮播图

前端javascript+jQuery实现旋转木马效果轮播图slider

浅谈轮播图(原生JavaScript实现)