制作图片轮显效果（JavaScript）

1. 任务要求1）BOM对象模型；2）掌握document对象的重要属性和方法；3）JavaScript与CSS交互。2. 需求说明带按钮的轮换显示的横幅广告，五张广告图片循环显示，并且下面的标题随图片显示不同的内容，单击数字按钮时可以即时显示对应的图片和相应的标题，如下图所示。3. 实现思路1）使用到对图片的隐藏（none）和显现（block）；2）首先在函数show()里定义一个数组title

今天我学习

2416人浏览 · 2021-07-23 15:25:34

今天我学习 · 2021-07-23 15:25:34 发布

1. 任务要求

1）BOM对象模型；

2）掌握document对象的重要属性和方法；

3）JavaScript与CSS交互。

2. 需求说明

带按钮的轮换显示的横幅广告，五张广告图片循环显示，并且下面的标题随图片显示不同的内容，单击数字按钮时可以即时显示对应的图片和相应的标题，如下图所示。

3. 实现思路

1）使用到对图片的隐藏（none）和显现（block）；

2）首先在函数show()里定义一个数组titles；

3）写一个for循环，用于判断当点击的对应数字与i相同时，就将对应序号的图片以及相关文字显示描述出来。否则，将图片隐藏，文字只显示数字。

4. 实现代码

function show(n){
	var titles=new Array("圆明园","天安门","故宫","长城","黄鹤楼");//数组文字部分可更改
	for(var i=1;i<=5;i++){
		var img=document.getElementById("Rotator_"+i);
		var title=document.getElementById("fig_"+i);
		if(n==i){
			img.style.display="block";//显示当前图片
			title.innerHTML=titles[i-1];//显示文字
			title.className="numberOver";//更新class属性
		}	
		else{
			img.style.display="none";//隐藏图片
			title.innerHTML=i;//显示数字
			title.className="number";//更新class属性
		}	
	}
}

5. 运行结果

6. 其他代码

.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>带按钮的横幅壁纸</title>
	<link href="css/adRotator.css" rel="stylesheet" type="text/css" />
	<script src="js/ad.js"></script>
</head>
<body onLoad=show(1)>
	<div class="adver">
		<img src="img/ad1.jpg" alt="广告图片" id="Rotator_1"/> //五张图片需要存放在对应位置上(图片可按自己喜好更改)
		<img src="img/ad2.jpg" alt="广告图片" id="Rotator_2"/>
		<img src="img/ad3.jpg" alt="广告图片" id="Rotator_3"/>
		<img src="img/ad4.jpg" alt="广告图片" id="Rotator_4"/>
		<img src="img/ad5.jpg" alt="广告图片" id="Rotator_5"/>
		<div class="Rotator_bg">
			<div class="number" id="fig_1" onclick="show(1)">1</div>
			<div class="number" id="fig_2" onclick="show(2)">2</div>
			<div class="number" id="fig_3" onclick="show(3)">3</div>
			<div class="number" id="fig_4" onclick="show(4)">4</div>
			<div class="number" id="fig_5" onclick="show(5)">5</div>
		</div>
	</div>
</body>
</html>

.css

body{
	margin:0;
	margin-top:3px;
	padding:0;
	font-size:12px;
	line-height:20px;
	color:#333;
}
.adver{
	width:450px;
	border:solid 1px #ffffff;
	margin-left:auto;
	margin-right:auto;
	border-radius: 10px;
}
.Rotator_bg{
	background-color: #7c7d7f;
	height:20px;
	border-top:solid 1px #262626;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	
}
.number{
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
	background-color:#6f6f6f;
	display: block;
	border: 1px solid #6f6f6f;
	width:18px;
	height:18px;
	text-align: center;
	margin-left:15px;
	cursor:pointer;
	float:left;
}
.numberOver{
	color:#000000;
	font-size:14px;
	width:280px;
	height:19px;
	background-color:#FFF;
	text-align:center;
	float:left;
	display: block;
	margin-left:10px;
	border-bottom: 1px solid #7C7D7F;
}
.main{
	width:95%;
	margin-left:auto;
	margin-right:auto;
}
.left_indent{
	padding-left:20px;
}
.red{
	color:#F00;
}
.adver img{
	width:450px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}