当前位置:网站首页>英雄联盟轮播图自动轮播
英雄联盟轮播图自动轮播
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"
}
}
每间隔2s,让图片自动滚动一次
在当前图片的基础上,自动轮播到下一张
明确当前是第几张图片?
var index=0 //当前图片的索引值
每调用索引值++
每调用一次函数 图片需要自动变化到下一张,如果是最后一张回到第一张
var t1=setInterval(function(){
if(index==4){
index=0
}else{
index++
}
滚动指定位置
imgWrap.style.marginLeft=-820*index+"px"
找到指定的导航添加上选中样式
for(var j=0;j<lis.length;j++){
lis[j].className=""
}
lis[index].className="active"
},2000)
当鼠标放入整体的轮播图容器时,定时器终止
var banner=document.getElementById("banner")
banner.onmouseenter=function(){
clearInterval(t1)
}
鼠标离开banner后,定时器重启
banner.onmouseleave=function(){
t1=setInterval(function(){
if(index==4){
index=0
}else{
index++
}
滚动指定位置
imgWrap.style.marginLeft=-820*index+"px"
找到指定的导航添加上选中样式
for(var j=0;j<lis.length;j++){
lis[j].className=""
}
lis[index].className="active"
},2000)
}
边栏推荐
- Kratos战神微服务框架(二)
- Redis之性能指标、监控方式
- The order of include header files and the difference between double quotation marks "and angle brackets < >
- 数字人主播618手语带货,便捷2780万名听障人士
- Activiti7工作流的使用
- CSP student queue
- Blue Bridge Cup_ Single chip microcomputer_ Measure the frequency of 555
- [oc]- < getting started with UI> -- common controls - prompt dialog box and wait for the prompt (circle)
- KDD 2022论文合集(持续更新中)
- Different data-driven code executes the same test scenario
猜你喜欢
Advanced Computer Network Review(5)——COPE
【图的三大存储方式】只会用邻接矩阵就out了
Master slave replication of redis
Design and implementation of film and television creation forum based on b/s (attached: source code paper SQL file project deployment tutorial)
基于B/S的医院管理住院系统的研究与实现(附:源码 论文 sql文件)
Redis' bitmap
Lua script of redis
Servlet learning diary 7 -- servlet forwarding and redirection
Design and implementation of online shopping system based on Web (attached: source code paper SQL file)
LeetCode41——First Missing Positive——hashing in place & swap
随机推荐
什么是MySQL?MySql的学习之路是怎样的
注意力机制的一种卷积替代方式
What is MySQL? What is the learning path of MySQL
LeetCode:26. Remove duplicates from an ordered array
Redis core configuration
基于WEB的网上购物系统的设计与实现(附:源码 论文 sql文件)
[oc]- < getting started with UI> -- common controls uibutton
[OC foundation framework] - string and date and time >
Global and Chinese market of AVR series microcontrollers 2022-2028: Research Report on technology, participants, trends, market size and share
Advanced Computer Network Review(4)——Congestion Control of MPTCP
Master slave replication of redis
Redis cluster
Persistence practice of redis (Linux version)
Redis之Geospatial
不同的数据驱动代码执行相同的测试场景
BMINF的后训练量化实现
Parameterization of postman
使用标签模板解决用户恶意输入的问题
Redis' performance indicators and monitoring methods
数字人主播618手语带货,便捷2780万名听障人士