Web开发基础-JavaScript-18

JS中DOM对象的使用

JS修改className样式

案例思路：

演示案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片轮播</title>
		<style type="text/css">
			div {
				width:218px;
				height:218px;
				border:1px solid red;
				margin:50px auto;
			}
			
			/* 通过类选择器预置样式，然后通过js判断
			改变样式的条件，当条件达成时，通过
			修改className来改变样式。这种方式
			是修改样式的经典用法。 */
			
			.show {
				display:inline-block;
			}
			
			.hide {
				display:none;
			}
		</style>
	</head>
	<body>
		<!-- 
			onmouseover是鼠标悬停事件;
			onmouseout是鼠标离开事件;
		 -->
		<div id="d1" 
			 onmouseover="pause1();"
			 onmouseout="lunbo();"> 
			<img alt="" src="../images/01.jpg" class="show">
			<img alt="" src="../images/02.jpg" class="hide">
			<img alt="" src="../images/03.jpg" class="hide">
			<img alt="" src="../images/04.jpg" class="hide">
			<img alt="" src="../images/05.jpg" class="hide">
			<img alt="" src="../images/06.jpg" class="hide">
		</div>
		
		<script type="text/javascript">
			var id= null;
			//轮播次数
			var index = 0;
			
			//声明轮播函数
			function lunbo(){
				//每2s轮播一次
				id = setInterval(function(){
					index++;
					//将所以的图片隐藏
					var div = document.getElementById("d1");
					var imgs = div.getElementsByTagName("img");
					for(var i=0;i<imgs.length;i++){
						imgs[i].className = "hide";
					}
					//将下一个图片显示
					var next = index%imgs.length;
					imgs[next].className = "show";
				},2000);
					
			}
		
			//页面加载完成后[调用轮播函数]
			lunbo();
			
			//暂停轮播
			function pause1(){
				clearInterval(id);
			}
			
		</script>
	
	</body>
</html>

最终页面显示效果：

每隔2s循环显示图片，鼠标悬停在图片上时，轮播暂停，离开时图片又开始轮播。

Web开发基础-JavaScript-18

猜你喜欢