Javascript学习笔记（7_2） ---Js中的BOM

最新推荐文章于 2024-01-19 15:54:12 发布

桑丘紫言

最新推荐文章于 2024-01-19 15:54:12 发布

阅读量155

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_39209728/article/details/80636025

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

案例轮播图实现

一、	获取ID元素
document.getElementById(‘id名称’)
二、	获取集合元素（标签名称获取）
Document.getElementsByTagName(’ 节点名称’)
三、	给元素添加样式
元素.style.属性名称 = 值
四、	鼠标移入事件：onmouserover

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>lunboImg</title>
		<style type="text/css">
			*{margin:0;padding: 0;}
			#box{
				width:520px;
				height:280px;
				/*border:1px solid #000;*/
				margin:50px auto;
				overflow: hidden;
				position: relative;
			}
			ul{
				list-style: none;
			}
			ul li{
				width:520px;
				height:280px;
			}
			#box span{
				color: #fff;
				position: absolute;
				width:50px;
				height:100px;
				top:90px; /*(280-100)/2 = 90*/
				background:#ccc;
				opacity:0.5;
				font-size: 50px;
				line-height: 100px;
			}
			#left{
				left:0;
			}
			#right{
				right:0;
			}
		</style>
	</head>
	<body><!--520 *280-->
		<div id="box">
                      
			<ul>
				<li><img src="images/1.jpg" /></li>
				<li><img src="images/2.jpg" /></li>
				<li><img src="images/3.jpg" /></li>
				
			</ul>
			<div>
				<span id="left"> <</span>
				<span id="right"> ></span>
			</div>
		</div>
		
		<script type="text/javascript" src="script.js">
		</script>
	</body>
</html>

script.js

/*var dom = document.getElementById("box"); // 文档的获取对象为 ID的 （box)
dom.style.color='blue'*/
/*var lis = document.getElementsByTagName('li');
for(var i = 0 ; i < lis.length ; i ++ ){
	lis[i].style.background = 'pink'
}*/

/****轮播图js***/
var lis = document.getElementsByTagName('li'),
	index = 0 ,//计数器
	box = document.getElementById('box');
var timer = setInterval(function(){
	for(var i = 0 ;  i < lis.length;  i++ ){
		lis[i].style.display = "none";
	}
	index++;
	if(index > lis.length - 1){
		index = 0;
	}
	lis[index].style.display =  "block";
	
},1000);

box.onmouseover = function(){
	clearInterval(timer);
}