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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值