<!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"
//移动位置 因为是往左移动,所以是负值(左负右正),移动的值等于当前索引值乘一张图片的宽度820px
contentUl.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>
更多推荐
英雄联盟官网轮播图
发布评论