英雄联盟轮播图自动轮播
Posted 爱笑的陈sir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了英雄联盟轮播图自动轮播相关的知识，希望对你有一定的参考价值。
六月过去了，七月还会远吗？不知不觉到了六月底的最后一天。你好，七月！
大家好，我是小陈陈呀，上次写了一篇英雄联盟轮播图手动轮播，当天晚上有很多大朋友小朋友私信小陈陈：可以在上次手动轮播的基础上，实现自动轮播的话，那样会不会更炫酷呢？炫不炫酷我不知道，但是我们可以实现它🙂。
清除网页的默认距离
/* 清除网页的默认距离*/
*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)
英雄联盟首页轮播图还原（部分）
JQ轮播图自动轮播效果及bug解决
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 #box{width:600px;height:400px;margin:0 auto;position:relative;overflow:hidden;} 9 #box .con{width:3600px;height:400px;position:absolute;left:0;top:0;} 10 #box .con img{float:left;} 11 #box ul{position:absolute;bottom:0;right:0;} 12 #box ul li{list-style:none;float:left;margin-left:1px;width:80px;height:26px;line-height:26px; 13 color:#fff;text-align:center;background:red;opacity:0.7;} 14 15 </style> 16 <script src="js/jquery.1.9.1.js" type="text/javascript" charset="utf-8"></script> 17 <script type="text/javascript"> 18 $(function(){ 19 //大总管变量默认值为0，即第一项 20 var c=0; 21 //1代表不能点击，2代表能点击 22 var sta=2; 23 24 25 //无缝滚动定时器 26 function run(){ 27 c++; 28 //当C=6，找到ul，把left重置为0,c为1 29 30 if(c==6){ 31 $("#box .con").css({\'left\':\'0\'}); 32 c=1; 33 } 34 var l=c*-600; //600为每张图片的宽度 35 sta=1;//定时器轮播时，不能点击 36 //con元素向左移动,运动前要加stop() 37 $("#box .con").animate({"left":l+"px"},400,function(){ 38 //执行完动画，将sta转为可以点击 39 sta=2; 40 }); 41 42 if(c==5){ 43 $(\'#box ul li\').eq(0).css({\'opacity\':\'0.9\'}).siblings().css({\'opacity\':\'0.7\'}); 44 }else{ 45 //让当前的li透明度为0.9，兄弟li为0.7 46 $("#box ul li").eq(c).css({\'opacity\':\'0.9\'}).siblings().css({\'opacity\':\'0.7\'}); 47 } 48 49 } 50 51 //全局变量timer 52 var timer=setInterval(run,1000); 53 var t; 54 55 56 //给li添加单击切换效果 57 $(\'#box ul li\').click(function(){ 58 if(sta==1){//不能点击 59 return; //后面代码不执行，返回 60 } 61 //清理定时炸弹 62 clearTimeout(t); 63 //点击时候，先清理定时器 64 clearInterval(timer); 65 t=setTimeout(function(){ 66 timer=setInterval(run,2000); 67 },400) 68 //获得当前被点击li的序号 69 c=$(this).index(); 70 //计算大DIV应该到达的Left的值 71 var left=c*-600; 72 //con元素向左移动,运动前要加stop() 73 74 $("#box .con").stop().animate({"left":left+"px"},300); 75 //让当前的li透明度为0.9，兄弟li为0.7 76 $(this).css({\'opacity\':\'0.9\'}).siblings().css({\'opacity\':\'0.7\'}); 77 }) 78 }) 79 </script> 80 </head> 81 <body> 82 <div id="box"> 83 <div class="con"> 84 <!-- img[src=img/$.jpg]*5 --> 85 <img src="img/1.jpg" alt="" /> 86 <img src="img/2.jpg" alt="" /> 87 <img src="img/3.jpg" alt="" /> 88 <img src="img/4.jpg" alt="" /> 89 <img src="img/5.jpg" alt="" /> 90 <!--复制一份第一张图片--> 91 <img src="img/1.jpg" alt="" /> 92 </div><!--end of con--> 93 <ul> 94 <li style="opacity:0.9">包包</li> 95 <li>男装</li> 96 <li>女装</li> 97 <li>男鞋</li> 98 <li>女鞋</li> 99 </ul> 100 </div> 101 </body> 102 </html>
效果图如下：
学习课程网址：http://study.163.com/course/courseLearn.htm?courseId=1003498007#/learn/video?lessonId=1004152564&courseId=1003498007
以上是关于英雄联盟轮播图自动轮播的主要内容，如果未能解决你的问题，请参考以下文章