当前位置：网站首页>英雄联盟轮播图手动轮播
英雄联盟轮播图手动轮播
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行
工程量足足减少一半，大大提高了效率，减小了工作量。
成品效果展示：
英雄联盟轮播图
边栏推荐
- QML control type: menu
- Redis之连接redis服务命令
- Implement window blocking on QWidget
- Redis cluster
- [oc foundation framework] - ＜ copy object copy ＞
- Global and Chinese markets of SERS substrates 2022-2028: Research Report on technology, participants, trends, market size and share
- Heap (priority queue) topic
- Intel Distiller工具包-量化实现1
- Intel Distiller工具包-量化实现2
- Mathematical modeling 2004b question (transmission problem)
猜你喜欢
Reids之缓存预热、雪崩、穿透
Redis之主从复制
Solve the problem of inconsistency between database field name and entity class attribute name (resultmap result set mapping)
Advance Computer Network Review(1)——FatTree
【文本生成】论文合集推荐丨 斯坦福研究者引入时间控制方法 长文本生成更流畅
Redis之核心配置
Advanced Computer Network Review(4)——Congestion Control of MPTCP
Sentinel mode of redis
Redis cluster
Selenium+Pytest自动化测试框架实战
随机推荐
CSP student queue
Kratos战神微服务框架(一)
Reids之缓存预热、雪崩、穿透
Global and Chinese market of linear regulators 2022-2028: Research Report on technology, participants, trends, market size and share
Five layer network architecture
Le modèle sentinelle de redis
Kratos ares microservice framework (I)
How to intercept the string correctly (for example, intercepting the stock in operation by applying the error information)
Redis之哨兵模式
[oc]- < getting started with UI> -- learning common controls
Parameterization of postman
LeetCode：162. Looking for peak
Advanced Computer Network Review(4)——Congestion Control of MPTCP
Intel distiller Toolkit - Quantitative implementation 3
Advance Computer Network Review(1)——FatTree
Heap (priority queue) topic
Advance Computer Network Review(1)——FatTree
LeetCode41——First Missing Positive——hashing in place ＆ swap
Appears when importing MySQL
[oc]- < getting started with UI> -- common controls uibutton