js实现图片数组中图片切换效果
更新时间：2022年07月21日 11:37:47 作者：蓝胖胖。
这篇文章主要为大家详细介绍了js实现图片数组中图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
写一个图片切换的小案例，巩固一下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>实现效果为当点击下一张图片切换至数组中的下一张，点击上一张切换至数组中的下一张
初始界面为
点击下一张效果为
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于ES6的异步终极解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了JavaScript中的Proxy-Reflect操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
js window.onload 加载多个函数和追加函数详解
本篇文章主要是对js window.onload 加载多个函数和追加函数进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了JS如何实现距离上次刷新已过多少秒,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了京东优选小程序的实现代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了JS大坑之19位数的Number型精度丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
ES6中export default和export之间的区别详解
export和export default都是es6语法中用来导出组件的,可以导出的文档类型有( 数据、常量、函数、js文件、模块等),下面这篇文章主要给大家介绍了关于ES6中export default和export之间的区别的相关资料,需要的朋友可以参考下2023-04-04
jquery的写法从事web开发的人员应该不会陌生吧，下面我们要说的是使用js模仿jquery写法的实现代码，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-06-06
URL对于开发人员来讲，应该是非常熟悉的东西了吧。这篇文章主要为大家详细介绍了JavaScript中更安全的URL读写方法，希望对大家有所帮助2023-02-02
这篇文章主要为大家详细介绍了微信小程序scroll-view组件实现滚动动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
最新评论