当前位置：网站首页>英雄联盟轮播图手动轮播
英雄联盟轮播图手动轮播
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行
工程量足足减少一半，大大提高了效率，减小了工作量。
成品效果展示：
英雄联盟轮播图
边栏推荐
- Redis cluster
- LeetCode：34. Find the first and last positions of elements in a sorted array
- Intel Distiller工具包-量化实现2
- 五层网络体系结构
- [oc]- < getting started with UI> -- learning common controls
- [oc]- < getting started with UI> -- common controls - prompt dialog box and wait for the prompt (circle)
- The order of include header files and the difference between double quotation marks "and angle brackets < >
- The five basic data structures of redis are in-depth and application scenarios
- Global and Chinese market of linear regulators 2022-2028: Research Report on technology, participants, trends, market size and share
- IDS' deletion policy
猜你喜欢
![[OC foundation framework] - [set array]](/img/b5/5e49ab9d026c60816f90f0c47b2ad8.png)
随机推荐
Different data-driven code executes the same test scenario
[OC foundation framework] - string and date and time ＞
Le modèle sentinelle de redis
Global and Chinese market of metallized flexible packaging 2022-2028: Research Report on technology, participants, trends, market size and share
在QWidget上实现窗口阻塞
Selenium+Pytest自动化测试框架实战（下）
Appears when importing MySQL
Redis之连接redis服务命令
An article takes you to understand the working principle of selenium in detail
Blue Bridge Cup_ Single chip microcomputer_ PWM output
一改测试步骤代码就全写 为什么不试试用 Yaml实现数据驱动？
Chapter 1 :Application of Artificial intelligence in Drug Design:Opportunity and Challenges
go-redis之初始化连接
Booking of tourism products in Gansu quadrupled: "green horse" became popular, and one room of B & B around Gansu museum was hard to find
美团二面：为什么 Redis 会有哨兵？
Global and Chinese market of appointment reminder software 2022-2028: Research Report on technology, participants, trends, market size and share
Intel distiller Toolkit - Quantitative implementation 1
BMINF的后训练量化实现
[oc]- < getting started with UI> -- common controls - prompt dialog box and wait for the prompt (circle)
Simclr: comparative learning in NLP