《JavaScript15》网页图片切换案例

最新推荐文章于 2024-10-18 02:00:00 发布

原创最新推荐文章于 2024-10-18 02:00:00 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

这篇博客介绍了一个使用JavaScript编写的图片轮播效果。通过HTML和CSS构建基本结构，然后用JavaScript实现上一张和下一张图片的切换功能。图片路径存储在数组中，通过改变img标签的src属性来切换显示的图片。此示例适用于前端网页动态展示多张图片的场景。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#back{
				width: 1000px;
				height: 600px;
				background-color: aqua;
				margin: 10px auto;
				/* 设置内联元素的居中 */
				text-align: center;	
			}
			#images{
				width: 980px;
				height: 500px;
				margin: 10px;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var button1 = document.getElementById("pre");
				var button2 = document.getElementById("next");
				// 通过下面这行命令获取的是一个数组
				var imgLabel = document.getElementsByTagName("img")[0];
				// 想要实现切换图片,需要知道要切换图片的路径,我们新建一个数组来保存所有图片的路径
				var imgArry = ["img/image1.jpg", "img/image2.jpg", "img/image3.jpg", "img/image4.jpg", "img/image5.jpg", ];
				var num = 0;
				// 上一张
				button1.onclick = function(){
					num--;
					if(num == -1){
						num = imgArry.length-1;
					};
					// 通过修改img标签的src地址来实现切换图片的操作
					imgLabel.src = imgArry[num];
				};
				// 下一张
				button2.onclick = function(){
					num++;
					if(num == imgArry.length){
						num = 0;
					};
					imgLabel.src = imgArry[num];
				};
			};
		</script>

	</head>
	<body>
		<div id="back">
			<img id="images" src="img/image1.jpg" alt="参考">
			<button id="pre" type="button">上一张</button>
			<button id="next" type="button">下一张</button>
		</div>
	</body>
</html>