js实现图片数组中的图片切换

最新推荐文章于 2022-11-16 10:58:28 发布

蓝胖胖。

最新推荐文章于 2022-11-16 10:58:28 发布

阅读量3.7k

点赞数 5

分类专栏： JavaScript笔记文章标签： js

本文链接：https://blog.csdn.net/qq_44921114/article/details/108676636

版权

JavaScript笔记专栏收录该内容

11 篇文章 2 订阅

订阅专栏

写一个图片切换的小案例，巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值，如果属性已经存在则更改属性值。

方法：将图片放入数组中首先给img一个初始值，使用index存放当前被点击图片的下标，当再一次点击时，下标+1赋值给数组下标，利用setAttribute()方法给img标签设置src属性。上一张效果反之，代码如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		img {
			width: 400px;
			height: 400px;
			display: block;
		}
	</style>
	<body>
		<img src="../imgs/t11.jpg" alt="" id="img">
		<button type="button" id="prev">上一张</button>
		<button type="button" id="next">下一张</button>
	</body>
	<script type="text/javascript">
		var imgs = document.getElementById("img")
		var nextBtn = document.getElementById("next")
		var prevBtn = document.getElementById("prev")


		var imgArr = [
			"../imgs/t11.jpg",
			"../imgs/doraemon.jpg",
			"../imgs/peiqi.jpg",
			"../imgs/qiang.jpg"
		]
		var index = 0;

		nextBtn.onclick = function() {
			index++;

			if (index > imgArr.length - 1) {

				index = 0
			}
			imgs.setAttribute("src", imgArr[index])

		}

		prevBtn.onclick = function() {
			index--
			if (index < 0) {
				index = imgArr.length - 1
			}
			imgs.setAttribute("src", imgArr[index])
		}
	</script>
</html>

实现效果为当点击下一张图片切换至数组中的下一张，点击上一张切换至数组中的下一张

初始界面为
在这里插入图片描述
点击下一张效果为

在这里插入图片描述

蓝胖胖。

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
1
评论
js实现图片数组中的图片切换

写一个图片切换的小案例，巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值，如果属性已经存在则更改属性值。方法：将图片放入数组中首先给img一个初始值，使用index存放当前被点击图片的下标，当再一次点击时，下标+1赋值给数组下标，利用setAttribute()方法给img标签设置src属性。上一张效果反之，代码如下。<!DOCTYPE html><html> <head> <meta char
复制链接

扫一扫