网站设计基础教程||阶段案列9.4||通过JS实现背景图片切换

最新推荐文章于 2025-05-28 19:34:53 发布

泪湿眼眸

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量410

点赞数 1

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/qq_45085385/article/details/122018495

版权

本教程介绍了如何利用JavaScript基础实现网页背景图片的动态切换效果，适用于进阶的网站设计学习者。通过简单的代码示例，读者可以了解到JavaScript在控制CSS属性方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>阶段案例9.4|21305雷文涛|</title>
		<style type="text/css">
		*{margin: 0; padding: 0;list-style: none;}
			.div-bj{
				margin: 0px auto;
				margin-top: 10%;
				width: 75%;
				height: 600px;
				box-sizing: border-box;
				
			}
			.div-yuan{
				display: inline-block;
				width: 80px;
				height: 80px;
				border-radius: 40px;
				/* background-color: orange; */
				margin: 33px;
				border: 2px solid white;
				z-index: 120;
				position:relative;
				top: 300px;
				left: 9%;
			}
			.div-yuan:hover{
				cursor: pointer;
				transition: 0.3s;
				width: 70px;
				height: 70px;
				margin: 37px;
				border-radius: 36px;
				border: 3px solid red;
			}
			.div-zi{
				display: inline-block;
				width: 120px;
				height: 92px;
				border-radius:10px;
				background-color: darkgreen;
				font-size: 20px;
				line-height: 120px;
				font-weight: bold;
				text-align: center;
				color: #FFFFFF;
				margin: 15px;
				z-index: 100;
				position: relative;
				top: 200px;
				left: 9%;
			}
			.div-zi:hover{
				cursor: pointer;
				background-color: whitesmoke;
				color: red;
			}
			
		</style>
	</head>
	<body id="div3" >
		
		<div class="div-bj">
			<div class="div-yuan"style="background: url(img/duoyun.jpg);"></div>
			<div class="div-yuan"style="background: url(img/qingtian.jpg);"></div>
			<div class="div-yuan"style="background: url(img/shandian.jpg);"></div>
			<div class="div-yuan"style="background: url(img/xiaoxue.jpg);"></div>
			<div class="div-yuan"style="background: url(img/yinyun.jpg);"></div>
			<br />
			<div class="div-zi" onclick="a()">周一</div>
			<div class="div-zi" onclick="b()">周二</div>
			<div class="div-zi" onclick="c()">周三</div>
			<div class="div-zi" onclick="d()">周四</div>
			<div class="div-zi" onclick="e()">周五</div>
			
		
			
		</div>
		
		  
		 
	</body>
	<script type="text/javascript">
	function a(){document.getElementById("div3").style.backgroundImage="url(img/1.jpg)";}
	function b(){document.getElementById("div3").style.backgroundImage="url(img/2.jpg)";}
	function c(){document.getElementById("div3").style.backgroundImage="url(img/3.jpg)";}
	function d(){document.getElementById("div3").style.backgroundImage="url(img/4.jpg)";}
	function e(){document.getElementById("div3").style.backgroundImage="url(img/5.jpg)";}
	</script>
</html>

图片自己替换一下就好了啦。