利用for循环
<!DOCTYPE html>
<html>
<head>
<title>轮播图静态</title>
</head>
<style type="text/css">
*{ /*清楚网页默认间距*/
margin:0px;
padding: 0px;
}
.banner{
height:380px;
width: 820px;
background-color: red;
}
.img{
height: 340px;
width:820px;
overflow: hidden;
/*background-color: green;*/
}
.nav{
height: 40px;
width: 820px;
/*background-color: blue;*/
}
.nav li{
height:40px;
width: 164px;
float: left;
list-style: none;
text-align: center;
line-height: 40px;
font-size: 12px;
background-color: #e3e2e2;
}
.nav .ative{
background-color: white;
border-bottom: 2px solid #cea861;
height: 38px;
color: #c69b66;
}
.img li{
height: 340px;
width:820px;
float: left;
}
.img ul{
width: 4100px;
transition: all 0.8s;
}
</style>
<body>
<div class="banner">
<div class="img">
<ul id="mm">
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220428/beaa2ebcdb1a4bbf808ee901fc80032c.jpeg"></li>
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220429/840a729aaa5ec2f2feae2dff77ce4de1.jpeg"></li>
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220501/9a54727c3813655e114d86f331d51615.jpeg"></li>
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220429/a4d52db3da4cefce34e340e9875e7fe1.jpeg"></li>
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220430/20a9bfd7cd36b2a0f0ec0130cddc52fe.png"></li>
</ul>
</div>
<div class="nav">
<ul id="kk">
<li class="ative" id="li1">EDG冠军战队皮肤预售</li>
<li id="li2">精选皮肤限时五折</li>
<li id="li3">EDG冠军皮肤预售直播</li>
<li id="li4">EDG冠军手办 限时预售</li>
<li id="li5">至臻礼赠</li>
</ul>
</div>
</div>
<script>
var kk=document.getElementById("kk")//找到事件源容器
var lis=kk.getElementsByTagName("li")//找到指定容器下的li
var mm=document.getElementById("mm")
for(var n=0;n<lis.length;n++){
lis[n].index=n //分发索引值
lis[n].onmouseenter=function(){
for(var k=0;k<lis.length;k++){
lis[k].className="" //k代表了所有
}
this.className="ative"
mm.style.marginLeft=-820*this.index+"px" //利用当前元素的索引值*-820
}
}
</script>
</body>
</html>
总结:
1.document.getElementsByTagName() 在文档中通过标签名称找到对应的元素,放入数组中
2.this对象 :this指向 发送事件的元素 事件源
3.清除其他的选中样式 排他法:再次利用for循环设其总共为空
4.lis[n].index=n 分发索引值