《JavaScript15》网页图片切换案例

最新推荐文章于 2021-10-10 22:10:36 发布

Han_python

最新推荐文章于 2021-10-10 22:10:36 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Han_python/article/details/113448052

版权

JavaScript 图片轮播 DOM操作数组事件处理

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

<!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>

在这里插入图片描述

Han_python

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript15》网页图片切换案例

<!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: aq
复制链接

扫一扫

专栏目录