JS 实现图片上下张切换

最新推荐文章于 2024-06-27 12:49:37 发布

Zella Zhang

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/FemaleHacker/article/details/112724943

版权

javascript 同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

前端

19 篇文章 3 订阅

订阅专栏

该博客详细介绍了如何使用JavaScript实现图片上下切换的功能。通过修改img标签的src属性，结合DOM操作和事件监听，实现了图片的动态切换，并提供了完整的HTML、CSS和JS代码示例。同时，页面包含图片数量提示和按钮交互效果。

摘要由CSDN通过智能技术生成

文章目录

- JS 实现图片上下张切换

JS 实现图片上下张切换

思路：利用js切换图片，即修改img标签中的src属性即可。

body中相关设置

文本提示块（提示当前图片为第几张，共几张图片）
图片块（放置图片）
两个按钮（切换上下张按钮）

<body>
	<div id='outer'>
		<p id='info'></p>
		<img src="img/1.png" alt='11'>
		<button id='prev'>上一张</button>
		<button id='next'>下一张</button>
	</div>
</body>

css样式简单设置

<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		img{
			width: 600px;
			height: 400px;
		}
		#outer{
			width:600px;
			margin: 50px auto;
			padding: 10px;
			background-color: 	#FF8C00;
			text-align: center;
		}
		button{
			width: 100px;
			height: 30px;
			border-radius: 5px;
			background: green;
			color: #fff;
		}
		button:active {
			background: red;
			border:1px solid #000;
			color: #000;
			font-weight: bold;

		}
	</style>

js主要部分

首先根据id属性获取到p、img图片、button按钮
- 要明白是当按钮点击时才开始切换，所以要用到onclick事件
- 还要明白，因文档加载顺序问题，所以js的所有代码要写在**window.onload = function(){};**之中。否则，就将script标签写在body中。
创建一个图片路径数组，防止所有图片
创建index变量，保存当前正在显示的图片索引
- 上一张：index–
- 下一张：index++
- 但当切换到最后一张上一张时要改变index值为数组长度-1
- 当切换到最后一张下一张时要改变index值为0
最后设置提示文字

<script type="text/javascript">
 		window.onload = function(){
 			var prev = document.getElementById('prev');
 			var next = document.getElementById('next');
 			
 			// 获取img标签
			var img = document.getElementsByTagName('img')[0];

			// 创建一个数组，用来保存图片的路径
			var imgArr = ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];


			// 创建一个变量，保存当前正在显示的图片索引
			var index =0;

			// 设置提示文字
 			var info = document.getElementById('info');
 			var num=index+1;
 			info.innerHTML = num +'/' + imgArr.length;

 			// 上一张
 			prev.onclick = function(){
				// 切换图片
				index--;
				if(index<0){
					index=imgArr.length-1;
				}
				img.src = imgArr[index];

 				// 设置提示文字
				num = index+1;
 				info.innerHTML = num +'/' + imgArr.length;

 			};

 			// 下一张
 			next.onclick = function(){
 				// 切换图片
				index++;
				if(index>imgArr.length-1){
					index=0;
				}
				img.src = imgArr[index];
 				
 				// 设置提示文字
				num = index+1;
 				info.innerHTML = num +'/' + imgArr.length;
 			};
 		};
	</script>

效果图

图片切换

图片素材原图

是我喜欢的王安宇小哥哥，嘻嘻～
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8" />
	<title>js实现图片切换-wanjunY</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		img{
			width: 600px;
			height: 400px;
		}
		#outer{
			width:600px;
			margin: 50px auto;
			padding: 10px;
			background-color: 	#FF8C00;
			text-align: center;
		}
		button{
			width: 100px;
			height: 30px;
			border-radius: 5px;
			background: green;
			color: #fff;
		}
		button:active {
			background: red;
			border:1px solid #000;
			color: #000;
			font-weight: bold;

		}
	</style>
 	<script type="text/javascript">
 		window.onload = function(){
 			var prev = document.getElementById('prev');
 			var next = document.getElementById('next');
 			
 			// 获取img标签
			var img = document.getElementsByTagName('img')[0];

			// 创建一个数组，用来保存图片的路径
			var imgArr = ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];


			// 创建一个变量，保存当前正在显示的图片索引
			var index =0;

			// 设置提示文字
 			var info = document.getElementById('info');
 			var num=index+1;
 			info.innerHTML = num +'/' + imgArr.length;

 			// 上一张
 			prev.onclick = function(){
				// 切换图片
				index--;
				if(index<0){
					index=imgArr.length-1;
				}
				img.src = imgArr[index];

 				// 设置提示文字
				num = index+1;
 				info.innerHTML = num +'/' + imgArr.length;

 			};

 			// 下一张
 			next.onclick = function(){
 				// 切换图片
				index++;
				if(index>imgArr.length-1){
					index=0;
				}
				img.src = imgArr[index];
 				
 				// 设置提示文字
				num = index+1;
 				info.innerHTML = num +'/' + imgArr.length;
 			};
 		};
	</script>
</head>
<body>
	<div id='outer'>
		<p id='info'></p>
		<img src="img/1.png" alt='11'>
		<button id='prev'>上一张</button>
		<button id='next'>下一张</button>

	</div>
</body>
</html>

Zella Zhang

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
JS 实现图片上下张切换

文章目录JS 实现图片上下张切换body中相关设置css样式简单设置js主要部分效果图图片素材原图完整代码JS 实现图片上下张切换思路：利用js切换图片，即修改img标签中的src属性即可。body中相关设置文本提示块（提示当前图片为第几张，共几张图片）图片块（放置图片）两个按钮（切换上下张按钮）<body> <div id='outer'> <p id='info'></p> <img src="img/1.png" alt
复制链接

扫一扫

专栏目录