当前位置：网站首页>英雄联盟轮播图手动轮播
英雄联盟轮播图手动轮播
2022-07-06 09:00:00 【爱笑的陈sir】
感谢大朋友们小朋友们的催更，这个月都在努力复习功课，无异于对待期末考试。
通过前一个个小案例越做越熟悉，代码越来越简洁，整体架构越来越规范
一步一步循序渐进，今天写一个英雄联盟轮播图手动轮播练练手。
清除网页的默认距离
/* 清除网页的默认距离*/
*{
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">
<!-- 根导航据banner中内容，划分成img区域，以及导航区域,区域div -->
<div class="banner_img">
<!-- banner_img轮播图的显示窗口，只显示一张图片 -->
<!-- 滚动式轮播图，将图片并排显示 -->
<!-- 并列结构，无序联表ul>li -->
<!-- 需要给容器ul添加宽度，可以盛放五个元素并排显示 -->
<ul id="imgWrap">
<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 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标签，用于编写整个轮播图结构，命令.banner -->
<div class="banner">
<!-- 根导航据banner中内容，划分成img区域，以及导航区域,区域div -->
<div class="banner_img">
<!-- banner_img轮播图的显示窗口，只显示一张图片 -->
<!-- 滚动式轮播图，将图片并排显示 -->
<!-- 并列结构，无序联表ul>li -->
<!-- 需要给容器ul添加宽度，可以盛放五个元素并排显示 -->
<ul id="imgWrap">
<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 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>
<!-- ps工具
1.标尺 ctrl+r
2.移动工具 v 用于移动标尺线
3.放大镜工具 z
4.抓手工具 按住空格键
5.切片工具 ps 工具栏第五个
6.吸管工具 I -->
原来script里面的代码大约需用90多行甚至更多
但是这次利用循环分发指定的事件的方法不超过15行
工程量足足减少一半，大大提高了效率，减小了工作量。
成品效果展示：
英雄联盟轮播图
边栏推荐
- Intel Distiller工具包-量化实现1
- Master slave replication of redis
- Mysql database recovery (using mysqlbinlog command)
- [text generation] recommended in the collection of papers - Stanford researchers introduce time control methods to make long text generation more smooth
- Advanced Computer Network Review(3)——BBR
- 为拿 Offer，“闭关修炼，相信努力必成大器
- AcWing 2456. 记事本
- Redis之哨兵模式
- CUDA implementation of self defined convolution attention operator
- 一改测试步骤代码就全写 为什么不试试用 Yaml实现数据驱动？
猜你喜欢
Master slave replication of redis
Kratos ares microservice framework (I)
Selenium+pytest automated test framework practice (Part 2)
Redis之主从复制
Intel Distiller工具包-量化实现2
Ijcai2022 collection of papers (continuously updated)
Opencv+dlib realizes "matching" glasses for Mona Lisa
Simclr: comparative learning in NLP
Intel Distiller工具包-量化实现3
Reids之缓存预热、雪崩、穿透
随机推荐
[OC foundation framework] - [set array]
Redis' performance indicators and monitoring methods
IDS cache preheating, avalanche, penetration
Reids之缓存预热、雪崩、穿透
LeetCode：162. Looking for peak
CUDA实现focal_loss
Go redis initialization connection
使用标签模板解决用户恶意输入的问题
QML control type: Popup
I-BERT
Global and Chinese market of airport kiosks 2022-2028: Research Report on technology, participants, trends, market size and share
Redis之连接redis服务命令
基于B/S的医院管理住院系统的研究与实现（附：源码 论文 sql文件）
How to intercept the string correctly (for example, intercepting the stock in operation by applying the error information)
Sentinel mode of redis
Digital people anchor 618 sign language with goods, convenient for 27.8 million people with hearing impairment
Five layer network architecture
Multivariate cluster analysis
Servlet learning diary 7 -- servlet forwarding and redirection
Mise en œuvre de la quantification post - formation du bminf