英雄联盟轮播图逻辑

已于 2022-06-12 18:30:09 修改
阅读量1.1k 收藏 29
点赞数 34
分类专栏： JavaScript 文章标签： javascript 前端
于 2022-05-22 23:49:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62259825/article/details/124915404
版权

英雄联盟轮播图逻辑 基础篇

前言

一、静态英雄联盟轮播图布局

静态英雄联盟轮播图布局

学习了一段时间的JavaScript总觉得并不是非常熟练，做了一个静态LOL轮播图练练手，在上次静态英雄联盟轮播图布局的基础上，再度优化——滚动式英雄联盟轮播图，基础篇。

二、轮播图原理是什么？

在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时 ，b需要移动 ，移动一个a的宽度，使下一张图片显示，画了个图看一下大概效果：

在这里插入图片描述

三、轮播图大体结构

1.HTML部分

创建一个div标签，用于编写整个轮播图结构，命令.banner

 <div class="banner">

根导航据banner中内容，划分成img区域，以及导航区域,区域div

 <div class="banner_img">

banner_img轮播图的显示窗口
只显示一张图片
滚动式轮播图
将图片并排显示
并列结构，无序联表ul>li
需要给容器ul添加宽度
可以盛放五个元素并排显示

  <ul id="imgwarp">
     <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">

没并排之前
在这里插入图片描述

并排实现代码

  .banner_img li{
    width: 820px;
    height: 380px;
    float:left;
    /* 清除li前面的列表符号 */
    list-style:none
  }

并排后的效果图

网页还原过程中，如果需要编写对应的并列结构，直接使用无序列表进行开发ul>li

     <ul>
            <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>

2.CSS部分

1.定时器是什么？

一般情况实现动画效果可以采用CSS3里的transition属性实现动画过渡。但如果有需求只能采用原生JS的情况下可以采用JS里的定时器功能。当然还有很多可以实现动画效果的方法

2.过渡动画是什么？

以固定的时间（极短）每次将CSS样式修改一点，达到视觉上的动画效果，使运动看起来不是特别生硬。

3.transition属性实现动画过渡

    /* 过渡动画 */
   transition:all 0.2s;
  }

CSS部分代码

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

3.JS部分

关于事件编程的小知识点和小案列，建议去看看这篇博客：级联列表

事件编程经典案列：级联列表

什么是JS事件编程？

js事件编程:

 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标签

 var imgwarp=document.getElementById("imgwarp")

//当鼠标进入第一个li时

   li1.onmouseenter=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"

3.1.1 Li1选中样式效果图

在这里插入图片描述

/当鼠标进入 第二个li时

       li2.onmouseenter=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"

     }

看到下面的效果图，细心的人一定发现了一个小问题？从Li1选中样式，进入Li2选中样式时，一次只能选一个，但是两个选中样式都合在一起了，这很明显是不对的，如何修改，达到我们需要的效果？
可以利用排它法

 //将除了自己以外所有的li的选中样式  全部清除  
  li1.className=""
  li2.className=""
  li4.className=""
  li5.className=""

3.1.2 两个选中样式合在一起 错误示范图

在这里插入图片描述

3.1.3 修改后的效果图：

在这里插入图片描述

//当鼠标进入第三个li时

   li3.onmouseenter=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.onmouseenter=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.onmouseenter=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"
     }

做到这里大体结构差不多就完成了，怎么让图片左右移动？
做之前先举个小例子:一条流水线上面放着一排排鞋盒，通过流水线一个接一个往下流动，是鞋子在动？
还是流水线在动？当然肯定是流水线在动（hhhhhhh）

我们一起来实现所需效果：

//当鼠标进入第一个li时,ul的margin-left 为0px

//设置指定的标签 样式

 imgwarp.style.marginLeft="0px"

//当鼠标进入第二个li时,ul的margin-left 为-820px

  imgwarp.style.marginLeft="-820px"

综上所述，大同小异，以此类推

完整版源码：

<!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="imgwarp">
     <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>
            <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>
     //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.onmouseenter=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.onmouseenter=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.onmouseenter=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.onmouseenter=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.onmouseenter=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>

视频效果展示：

英雄联盟轮播图

爱笑的陈sir
关注
  • 34
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 70
    评论
专栏目录
LOL轮播图静态布局.html
05-18
学习了一段时间的JavaScript总觉得并不是非常熟练，写一个静态LOL轮播图练练手。 轮播图在许多网站上都可以看到，像淘宝，京东等电商网站的首页，是不可或缺的页面元素。 先来看看实现效果吧~
英雄联盟轮播图自动轮播
07-11
找到对应的事件源:找到五个li标签放入数组中，利用循环分发指定的事件。当鼠标放入整体的轮播图容器时，定时器终止。当鼠标放入整体的轮播图容器时，定时器重启。
英雄联盟官网轮播图
m0_68002039的博客
04-07 495
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { width: 820px; height: 380px; background-color: red; ma...
英雄联盟轮播图手动轮播
知而好问，然后能才
06-20 2271
一篇弄懂英雄联盟轮播图手动轮播
轮播图逻辑
hongranzuoxiang的博客
07-23 806
//循环添加 for (int i = 0 ; i < list.size() ; i++ ){ list2.add(list.get(i).getImageUrl()); } lbt.setImages(list2); lbt.isAutoPlay(true); lbt.setDelayTime(2000); lbt.setImageLoader(new ImageLoader() { @...
英雄联盟市场调研报告.docx
12-24
英雄联盟市场调研报告
仿英雄联盟官网.zip
02-07
用H5+CSS3实现的英雄联盟界面完美无差别静态版复原。适合初学Web编程的新手小白参考以及中极前端项目实战运用。
禁止电脑运行英雄联盟V2.cmd
09-23
自写脚本，脚本通过镜像劫持来阻止电脑运行英雄联盟各种进程。所有运行前必须关闭安全软件的自我保护，或卸载安全软件，执行此脚本后再安装。只是一个windows脚本而已，请放心使用。可右键编辑，有提示，如禁止...
LOL英雄联盟英雄介绍PPT动画下载
07-17
这是一份LOL英雄联盟游戏的英雄介绍PPT动画，共12页。第一PPT模板网提供精美幻灯片动画下载； 关键词：英雄联盟PPT下载，动态游戏介绍PowerPoint，.PPTX格式；
卡牌式轮播图
08-28
卡牌式轮播图，循环轮播，每个模块是div，div中可以放嵌入其他元素。
易语言取LOL选择英雄源码-易语言
06-13
易语言取LOL选择英雄源码
易语言exe源码,易语言获取英雄源码,易语言取LOL选择英雄
07-21
易语言取LOL选择英雄源码,取LOL选择英雄,消息处理,远线程注入,显示雄英处理,CallWindowProc,SetWindowLong,CreateRemoteThread,WaitForSingleObject,CloseHandle,VirtualFreeEx,VirtualAllocEx,WriteProcessMemory,LoadLibraryExA,GetProcAddress,FreeLibrary
js之轮播图的逻辑(简单)
m0_67932301的博客
05-14 372
js之轮播图的逻辑
轮播图的逻辑代码
tby_pr的博客
10-14 233
思路: 0. 获取元素 => imgBox: 承载图片的盒子 => pointBox: 承载焦点的盒子 1. 根据图片创建焦点(选做) => 你如果自己调整好的样式, 可以不做这一步 => 如果你希望将来简单一些, 那么现在可以做这一步 1-1. 确定我需要生成多少个焦点 -> imgBox 内有多少个 li, 就是有多少个图片 -> 就应该生成多少个焦点 -> 获取到 imgBox 内有多少个 l...
静态英雄联盟轮播图布局
知而好问，然后能才
05-17 4085
室友打了一局英雄联盟的时间，我居然学会了静态英雄联盟轮播图布局
【JavaScript】英雄联盟官网作品介绍，轮播图的实现
徒挽的博客
11-06 589
恭喜DRX夺得英雄联盟S12全球总决赛冠军，戴先生终于捧杯啦！言归正传，在大二寒假（2021年12月）开始了解JavaScript，主要学习算法，准备蓝桥杯的比赛，扩展自己的技术栈，蓝桥杯2022年4月9号考试完，紧赶慢赶的学习JavaScript，历经一个月的学习，最终做出来英雄联盟官网以作为JavaScript阶段的总结收尾。作品并没有一比一的还原英雄联盟，有一些自己创新性的改进，也有一些不足官网的功能，但整体上而言跟官网相似度达到90%，小伙伴们跟着博主一起走进英雄联盟官网叭。
图片轮播淡隐淡出js代码逻辑
miss尹先生
02-01 329
//图片轮播淡隐淡出 var lisize = $('.zong_demark_one_two > div').size(); var index = 0 ; var timer; $('.zong_demark').hover(function(){ clearInterval(timer) },function(){ timer=setInterval(function(){
lol轮播图静态效果
m0_67606035的博客
04-28 99
<!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&...
写一个包含css、js、轮播图的英雄联盟网站
最新发布
05-21
抱歉，作为语言模型，我无法提供完整的网站代码。但是，我可以给你一些指导和建议。 首先，你需要设计一个网站的布局和外观。可以使用 Adobe XD 或 Figma 等工具来创建设计模板。然后，使用 HTML 和 CSS 来实现你的设计。在这个过程中，你需要考虑以下几点： 1. 选择合适的字体和颜色，以增强网站的品牌形象。 2. 使用响应式设计来确保网站在不同设备上都有良好的展示效果。 3. 创建一个顶部导航栏，以方便用户浏览网站的不同部分。 4. 使用 CSS 创建动画和过渡效果，以增强用户体验。 接下来，你可以添加一些 JavaScript 功能来增强你的网站。例如，你可以添加一个轮播图来展示英雄联盟的图片或视频。也可以添加一些交互式功能，如表单验证、下拉菜单等。 最后，你需要将你的网站部署到一个 Web 服务器上。你可以使用像 Netlify、GitHub Pages 或 Heroku 这样的平台来免费部署你的网站。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 70
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值