肿瘤康复网 > 英雄联盟轮播图手动轮播

英雄联盟轮播图手动轮播

时间：2020-09-07 05:23:31

相关推荐

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

清除网页的默认距离

/* 清除网页的默认距离*/*{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://ossweb-/upload/adw/image/977/0513/1880117fcca33efc8c78ca9710544c12.jpeg"alt=""></li><li><img src="https://ossweb-/upload/adw/image/977/0513/251c4edc9aba721754a63c291a04f826.jpeg"alt=""></li><li><img src="https://ossweb-/upload/adw/image/977/0513/5fa9fbc22102906860ed52cb134cf17b.jpeg"alt=""></li><li><img src="https://ossweb-/upload/adw/image/977/0513/1850af58906b7be093c3f0fee9177d71.jpeg"alt=""></li><li><img src="https://ossweb-/upload/adw/image/977/0513/4dfbd939f2401ca8095cc7c679355618.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>西部魔影</li><li id=li4>西部魔影通行证</li><li id=li5>西部秘宝</li></ul></div></div><script>

找到对应的事件源:找到五个li标签放入数组中
不推荐document.getElementById(“li”)找li标签

var navWrap=document.getElementById("navWrap")//先找事件源的容器var lis=navWrap.getElementsByTagName("li")//找到navWrap下方所有的livar 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://ossweb-/upload/adw/image/977/0513/1880117fcca33efc8c78ca9710544c12.jpeg"alt=""></li><li><img src="https://ossweb-/upload/adw/image/977/0513/251c4edc9aba721754a63c291a04f826.jpeg"alt=""></li><li><img src="https://ossweb-/upload/adw/image/977/0513/5fa9fbc22102906860ed52cb134cf17b.jpeg"alt=""></li><li><img src="https://ossweb-/upload/adw/image/977/0513/1850af58906b7be093c3f0fee9177d71.jpeg"alt=""></li><li><img src="https://ossweb-/upload/adw/image/977/0513/4dfbd939f2401ca8095cc7c679355618.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>西部魔影</li><li id=li4>西部魔影通行证</li><li id=li5>西部秘宝</li></ul></div></div><script>//找到对应的事件源:找到五个li标签放入数组中//不推荐document.getElementById("li")找li标签var navWrap=document.getElementById("navWrap")//先找事件源的容器var lis=navWrap.getElementsByTagName("li")//找到navWrap下方所有的livar 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行

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