JavaScript|英雄联盟轮播图逻辑

2022-06-05 javascript前端

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

• 前言
• 一、静态英雄联盟轮播图布局
• 二、轮播图原理是什么？
• • 三、轮播图大体结构
  • 1.HTML部分
  • 2.CSS部分
  • 1.定时器是什么？
  • 2.过渡动画是什么？
  • 3.transition属性实现动画过渡
  • 3.JS部分
  • 关于事件编程的小知识点和小案列，建议去看看这篇博客：级联列表
  • 什么是JS事件编程？
  • js事件编程:
  • 3.1.1 Li1选中样式效果图
  • 3.1.2 两个选中样式合在一起 错误示范图
  • 3.1.3 修改后的效果图：
  • 英雄联盟轮播图视频效果欣赏

前言 一、静态英雄联盟轮播图布局 静态英雄联盟轮播图布局
学习了一段时间的JavaScript总觉得并不是非常熟练，做了一个静态LOL轮播图练练手，在上次静态英雄联盟轮播图布局的基础上，再度优化——滚动式英雄联盟轮播图，基础篇。
二、轮播图原理是什么？ 在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时 ，b需要移动 ，移动一个a的宽度，使下一张图片显示，画了个图看一下大概效果：

文章图片

三、轮播图大体结构 1.HTML部分

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

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

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

• 
  文章图片
  
• 
  文章图片
  
• 
  文章图片
  
• 
  文章图片
  
• 
  文章图片
  

没并排之前

文章图片

并排实现代码

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

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

• EDG冠军战队皮肤
• EDG冠军荣耀宝箱
• 西部魔影2022
• 西部魔影通行证
• 2022西部秘宝

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

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

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

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

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"

/当鼠标进入 第二个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=""

//当鼠标进入第三个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" }

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

//设置指定的标签 样式

imgwarp.style.marginLeft="0px"

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

imgwarp.style.marginLeft="-820px"

完整版源码：

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

• 
  文章图片
  
• 
  文章图片
  
• 
  文章图片
  
• 
  文章图片
  
• 
  文章图片
  

• EDG冠军战队皮肤
• EDG冠军荣耀宝箱
• 西部魔影2022
• 西部魔影通行证
• 2022西部秘宝

> //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" }

最后认识一下吧！ 一个正在努力学习前端知识的小萌新

感谢相遇，不亏不欠，不负遇见。 感谢阅读，祝你看完有所收获。

推荐阅读

• 

  大衬衣怎么搭配 让人眼前一亮
• 

  玻璃胶如何使用？玻璃胶如何使用?
• 

  橙子是什么季节的水果 怎么挑选橙子
• 

  华为手机忘记锁屏密码怎么办
• 

  如何快速升级公益服务器？ 公益服务器怎么升级最快
• 

  苹果动图如何保存 苹果怎么保存贴吧动图
• 

  志高空调无法开机该怎么解决?,基本上用这几种方法
• 

  国庆节购车指南 2020国庆节买车优惠力度大吗
• 

  立式空调怎么消毒
• 

  华为S7703交换机,一个镜像口如何对应多个观察口？华为S7703的介绍
• 

  灵芝孢子粉怎么吃
• 

  linux的echo命令 linux中echo命令的用法
• 

  李白的《清平调》是李白最有意境的诗吗？
• 

  最新版excel怎么制作迷你图 excel2016怎么添加迷你图
• 

  湖北荆州一周天气预报_湖北荆州天气查询
• 

  新款混动汉兰达报价及图片 新款汉兰达混动版落地多少钱
• 

  驱动桥类型 驱动桥类型有哪几种
• 

  文明6全面开战神级难度教学 全面开战怎么玩
• 

  玩咖女是什么意思
• 

  android中shape 的使用

• 如何在JavaScript中实现HashMap（详细实现指南）
• CSS如何实现元素对齐（）
• 什么是JavaScript运算符以及如何使用它（）
• Python如何使用Kivy制作计算器（）
• 如何在Tkinter中制作合适的双滚动条框架（）
• JavaScript分组运算符用法示例和解析
• JavaScript中如何检查变量是否为数组（）
• HTML DOM console.time()方法用法示例介绍
• CSS overflow(溢出)用法示例代码介绍