JS零基础入门——09（轮播图动态方法二）

本文链接：https://blog.csdn.net/m0_65410668/article/details/124746812

利用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 分发索引值