javascript切换图 js切换图片

转载

clghxq 2023-07-23 07:46:23

文章标签 javascript切换图 javascript html5 css python 文章分类 JavaScript 前端开发

要求：

制作一个使用JS来操作的简单的页面中图片切换的练习，并显示所展示图片的相关信息。

实现思路：

大致了解练习后，可以知道整个练习是在一个大div块中进行图片和文字信息显示的。显然，图片显示需要用到<img>标签，文字信息展示可以使用<p>标签，图片之间的切换可以使用<button>按钮来实现相关操作。最终，在前面的基础上加上相关JS代码，就可以使所有的图片之间可以随意进行相应切换，并显示切换后的图片文字信息。

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			#outer{
				width: 665px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 点击按钮切换图片
				 */
				
				// 先要获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				// 要切换图片就是要修改img标签的src属性
				// 获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				// 创建一个数组，用来保存图片的路径
				var imgArr = ["img/1.jpeg", "img/2.jpeg", "img/3.jpeg", "img/4.jpeg", "img/5.jpeg"];
				
				// 创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				
				// 获取id为info的p元素
				var info = document.getElementById("info");
				// 设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前是第 "+(index+1)+" 张"
				
				// 分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					// alert("上一张");
					// 要修改一个元素的属性 元素.属性 = 属性值
					// 切换到上一张，索引自减
					index--;
					// 判断index是否小于0
					if (index < 0){
						index = imgArr.length-1;
					}
					img.src = imgArr[index];
					// 当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前是第 "+(index+1)+" 张";
				};
				next.onclick = function(){
					// alert("下一张");
					// 切换到下一张，索引自增
					index++;
					// 判断index是否大于 imgArr.length-1
					if (index > imgArr.length-1){
						index = 0;
					}
					img.src = imgArr[index];
					// 当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前是第 "+(index+1)+" 张";
				};
			};
		</script>
	</head>
	<body>
		<div id="outer">
			<p id="info"></p>
			<img src="img/1.jpeg" alt="加载图片失败！">
			<button type="button" id="prev">上一张</button>
			<button type="button" id="next">下一张</button>
		</div>
	</body>
</html>

结果展示：

javascript切换图 js切换图片_javascript