当前位置：网站首页>英雄联盟轮播图手动轮播
英雄联盟轮播图手动轮播
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行
工程量足足减少一半，大大提高了效率，减小了工作量。
成品效果展示：
英雄联盟轮播图
边栏推荐
- [oc]- < getting started with UI> -- learning common controls
- QML type: overlay
- Selenium+pytest automated test framework practice (Part 2)
- Redis geospatial
- Kratos战神微服务框架(一)
- Redis cluster
- Servlet learning diary 8 - servlet life cycle and thread safety
- Global and Chinese market of linear regulators 2022-2028: Research Report on technology, participants, trends, market size and share
- Opencv+dlib realizes "matching" glasses for Mona Lisa
- 为拿 Offer，“闭关修炼，相信努力必成大器
猜你喜欢
基于B/S的影视创作论坛的设计与实现（附：源码 论文 sql文件 项目部署教程）
QML control type: Popup
Redis cluster
Ijcai2022 collection of papers (continuously updated)
![[oc]- < getting started with UI> -- common controls - prompt dialog box and wait for the prompt (circle)](/img/af/a44c2845c254e4f48abde013344c2b.png)
[oc]- < getting started with UI> -- common controls - prompt dialog box and wait for the prompt (circle)
Opencv+dlib realizes "matching" glasses for Mona Lisa
Servlet learning diary 8 - servlet life cycle and thread safety
IJCAI2022论文合集（持续更新中）
What is MySQL? What is the learning path of MySQL
Intel Distiller工具包-量化实现2
随机推荐
LeetCode：162. Looking for peak
什么是MySQL？MySql的学习之路是怎样的
Global and Chinese markets for hardware based encryption 2022-2028: Research Report on technology, participants, trends, market size and share
Sentinel mode of redis
[oc]- < getting started with UI> -- common controls - prompt dialog box and wait for the prompt (circle)
Basic usage of xargs command
Lua script of redis
一文读懂，DDD落地数据库设计实战
Redis之连接redis服务命令
The carousel component of ant design calls prev and next methods in TS (typescript) environment
CSP salary calculation
运维,放过监控-也放过自己吧
[shell script] - archive file script
Kratos ares microservice framework (I)
Servlet learning diary 8 - servlet life cycle and thread safety
LeetCode41——First Missing Positive——hashing in place ＆ swap
Redis之持久化实操(Linux版)
Global and Chinese market of metallized flexible packaging 2022-2028: Research Report on technology, participants, trends, market size and share
CUDA实现focal_loss
KDD 2022论文合集（持续更新中）