制作图片轮显效果(JavaScript)

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

大家好,欢迎来到IT知识分享网。

1. 任务要求

        1)BOM对象模型;

        2)掌握document对象的重要属性和方法;

        3)JavaScript与CSS交互。

2. 需求说明

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

制作图片轮显效果(JavaScript)

 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. 运行结果

制作图片轮显效果(JavaScript)

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;
}

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/9750.html

(0)
上一篇 2024-04-06 20:33
下一篇 2024-04-07 09:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信