<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}.box {width: 820px;height: 380px;background-color: red;margin: 40px auto 0;}/*窗口容器*/.content {width: 820px;height: 340px;background-color: lightgoldenrodyellow;/*内容超出部分隐藏*/overflow: hidden;}.nav {width: 820px;height: 40px;background-color: #e3e2e2;}.nav ul {list-style: none;}.nav ul li {width: 164px;height: 40px;float: left;text-align: center;line-height: 40px;font-size: 14px;cursor: pointer;}.nav .active {width: 164px;height: 38px;color: #ab8e66;background-color: #F7F6F6;border-bottom: 2px solid #CEA861;}/*滚动容器*/.content ul {list-style: none;width: 4100px;height: 340px;/*过渡动画*/transition: all 0.3s;}/*内容容器*/.content li {float: left;}.content li img {/*取消图片自带的边距*/display: block;}</style></head><body><div class="box"><!--窗口容器(用于显示部分的大小的容器，超出部分需隐藏)--><div class="content"><!--滚动容器(可以让所有滚动元素并排显示的容器，它的宽度是所有需要并排显示元素的宽度总和)--><ul><!--内容容器(存放每一个滚动元素的内容的容器)--><li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/1.jpeg" alt=""></li><li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/2.jpeg" alt=""></li><li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/3jpeg.jpeg" alt=""></li><li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/4.jpeg" alt=""></li><li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/5.jpeg" alt=""></li></ul></div><div class="nav"><ul><li class="active">幻灵战队</li><li>幻灵战队通行证</li><li>云顶之弈公开赛TOC3</li><li>至臻礼赠</li><li>周边"愚"你相伴好礼回馈</li></ul></div></div><script>//需求分析://1.当鼠标进入对应li时,li添加选中样式,其他清除选中样式//2.让对应图片显示 滚动容器移动到对应li的位置//1.获取元素//2.绑定事件 onclick//3.做什么事 function(){}var nav = document.getElementsByClassName("nav")[0]var navLis = nav.getElementsByTagName("li")var content = document.getElementsByClassName("content")[0]var contentUl = content.getElementsByTagName("ul")[0]//操作多个元素时,直接使用批量操作,for循环for (var n = 0; n < navLis.length; n++) {navLis[n].index = n//鼠标移入哪个li就加选中样式//在事件处理函数里,如果想获取到当前元素,使用this获取navLis[n].onmouseenter = function() {//排它法 再选中当前元素时,把除它外的元素样式清除for (var j = 0; j < navLis.length; j++) {navLis[j].className = ""}this.className = "active"//移动位置 因为是往左移动,所以是负值(左负右正),移动的值等于当前索引值乘一张图片的宽度820pxcontentUl.style.marginLeft = -this.index * 820 + "px"}}//定时器var num = 0;setInterval(function() {num++if (num > 4) {num = 0}for (var j = 0; j < navLis.length; j++) {navLis[j].className = ""}navLis[num].className = "active"contentUl.style.marginLeft = -num * 820 + "px"}, 3000)</script></body></html>
如果觉得《英雄联盟官网轮播图》对你有帮助，请点赞、收藏，并留下你的观点哦！
