英雄联盟怎么设置滚轮锁定大小（英雄联盟轮播图手动轮播）

时间2025-06-15 13:34:18分类IT科技浏览7474

导读：感谢大朋友们小朋友们的催更，这个月都在努力复习功课，无异于对待期末考试。...

感谢大朋友们小朋友们的催更，这个月都在努力复习功课，无异于对待期末考试。

通过前一个个小案例越做越熟悉，代码越来越简洁，整体架构越来越规范

一步一步循序渐进，今天写一个英雄联盟轮播图手动轮播练练手。

清除网页的默认距离

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

工程量足足减少一半，大大提高了效率，减小了工作量。

成品效果展示：

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。