【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片切换的实现带注释/总结

_小鹰

已于 2022-02-15 22:51:40 修改

阅读量263

点赞数 1

分类专栏：前端文章标签：前端 javascript css html

于 2022-02-15 22:19:44 首次发布

本文链接：https://blog.csdn.net/cc2855816075/article/details/122953345

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业3-图片切换</title>
		<script src="utility.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#b-box{
				border: 1px solid #000000;
				height: 300px;
			}
			#b-box div{
				border: 1px solid #000000;
				display: inline-block;
				margin: 50px 50px;
				
			}
			
			#img0{
				height: 200px;
			}
			
			#s1,#s2{
				border: 1px solid #000000;
				height: 70px;
				width: 50px;
				font-size: 50px;
				text-align: center;
				cursor: pointer;
				position: relative;
				bottom: 75px;
			}
			#img0{
				width: 200px;
			}
			#s1{
				color: #bebebe;
			}
			
		</style>
	</head>
	<body>
		<div id="b-box">
			<div class="switch0" onclick="switchPic(0)" id="s1">
				&lt;
			</div>
			
			<div>
				<img src="img-1.jpg" id="img0"/>
			</div>
			
			<div class="switch0" onclick="switchPic(1)" id="s2">
				&gt;
			</div>
		</div>
		
		<script type="text/javascript">
		
			var img_index = 1;
			
			function switchPic(flag){
				
				if(flag == 0){
					$("img0").src = "img-" + --img_index + ".jpg";
					if(img_index != 4){
						$("s2").style.color = "#000000";
					}
					if(img_index == 1){
						$("s1").style.color = "#bebebe";
					}
				}else{
					$("img0").src = "img-" + ++img_index + ".jpg";
					if(img_index != 1){
						$("s1").style.color = "#000000";
					}
					if(img_index == 4){
						$("s2").style.color = "#bebebe";
					}
				}
			}
		</script>
		
	</body>
</html>

其中所用到的utility.js：

function $(id){
	return document.getElementById(id);
}
function l(a){
	console.log(a);
}

DOM练习文件：

https://download.csdn.net/download/cc2855816075/80848641

_小鹰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片切换的实现带注释/总结

效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业3-图片切换</title> <script src="utility.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #b-box
复制链接

扫一扫