位置: IT常识 - 正文

英雄联盟轮播图手动轮播(英雄联盟轮转模式2020时间表)

编辑：rootadmin

英雄联盟轮播图手动轮播

推荐整理分享英雄联盟轮播图手动轮播(英雄联盟轮转模式2020时间表)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:英雄联盟轮廓,英雄联盟轮廓,英雄联盟轮换模式是什么意思,英雄联盟轮播图片高清,英雄联盟轮换模式在哪里,2021英雄联盟轮转模式,英雄联盟轮廓,英雄联盟轮廓,内容如对您有帮助，希望把文章链接给更多的朋友！

感谢大朋友们小朋友们的催更，这个月都在努力复习功课，无异于对待期末考试。通过前一个个小案例越做越熟悉，代码越来越简洁，整体架构越来越规范一步一步循序渐进，今天写一个英雄联盟轮播图手动轮播练练手。

清除网页的默认距离

/* 清除网页的默认距离*/ *{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; 英雄联盟轮播图手动轮播(英雄联盟轮转模式2020时间表)

设置背景颜色

background-color:#e3e2e2; } .banner_nav .active{ background-color:white; color:#ab8e66;

边框会增加元素的实际占位

border-bottom: 2px solid #cea861;height: 38px;}

body部分代码

//创建一个div标签，用于编写整个轮播图结构，命令.banner <div class="banner">  <div class="banner_img">     <ul id="imgWrap"> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106840-e1733c4e0df2aa7.jpeg"alt=""> </li> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106846-e1733c4e0df2aa7.jpeg"alt=""> </li> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106853-e1733c4e0df2aa7.jpeg"alt=""> </li> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106860-e1733c4e0df2aa7.jpeg"alt=""> </li> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106866-e1733c4e0df2aa7.jpeg"alt=""> </li> </ul> </div> <div class="banner_nav">  <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 class="banner">  <div class="banner_img">     <ul id="imgWrap"> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106840-e1733c4e0df2aa7.jpeg"alt=""> </li> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106846-e1733c4e0df2aa7.jpeg"alt=""> </li> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106853-e1733c4e0df2aa7.jpeg"alt=""> </li> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106860-e1733c4e0df2aa7.jpeg"alt=""> </li> <li> <img src="https://www.yuucn.com/wp-content/uploads/2023/05/1683106866-e1733c4e0df2aa7.jpeg"alt=""> </li> </ul> </div> <div class="banner_nav">  <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>

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

成品效果展示：

英雄联盟轮播图

本文链接地址:https://www.jiuchutong.com/zhishi/299329.html 转载请保留说明！

上一篇：使用python搭建一个简易的Web服务(如何搭建python)

下一篇：一文弄懂Vue与Servlet的交互：让你的大学课设变得容易起来(vue区别)