JS基础——图片切换练习

最新推荐文章于 2022-04-24 14:23:23 发布

Crazy ProMonkey

最新推荐文章于 2022-04-24 14:23:23 发布

阅读量1.4k

点赞数

分类专栏： python 项目练习前端文章标签： javascript html5 css python

本文链接：https://blog.csdn.net/Fleehom/article/details/120512287

版权

JavaScript 图片轮播 DOM操作事件处理前端开发

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

python 同时被 3 个专栏收录

18 篇文章 4 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

项目练习

8 篇文章 0 订阅

订阅专栏

要求：

制作一个使用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>

结果展示：

此次设计还进行了细致考虑和编写，当图片是第1张时，点击“上一张”按键，页面会切换到最后一张图片（即第5张）；同理，当当图片是第5张时，点击“下一张”按键，页面会切换到第1张图片。进行使此次练习实现了循环切换查看功能。

希望此次分享能给大家带来一些前端网页以及JS知识上的帮助（喜欢小编的关注、点赞走一波呦，后期会不定期分享更多Python、JS和前端相关知识）

Crazy ProMonkey

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS基础——图片切换练习

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

扫一扫