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中Iterator与for..of..遍历用法,结合实例形式分析了ES6中Iterator的概念、用法及for..of..遍历的使用技巧,需要的朋友可以参考下2017-03-03
javascript-解决mongoose数据查询的异步操作
这篇文章主要介绍了javascript-解决mongoose数据查询的异步操作，具有一定的参考价值，有兴趣的可以了解一下。2016-12-12
这篇文章主要介绍了JS中回调函数及用法，通过实例代码给大家详细介绍了什么是回调函数，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
这是我在给库中添加事件的时候写的添加事件的方法！这个方法实现了跨浏览器之间的方法！2009-02-02
对前端工程师来说,跨浏览器的兼容性问题一直是最头疼的,测试一个小小的东西,就要打开N个浏览器,然后比较来比较去,记录个浏览器的数据,比较不同,实在是麻烦.2010-03-03
这篇文章主要为大家详细介绍了微信小程序自定义弹出层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
实现类似于百度或谷歌的搜索下拉列表的，就是打开百度往里输入你要查询的条件，只要你一输入他就自动弹出一个下拉列表框，并显示相关所有搜索内容2009-07-07
这篇文章主要介绍了Javascript实现的简单右键菜单类,通过JavaScript自定义类实现右键菜单功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
JavaScript 对象新增方法defineProperty与keys的使用说明
这篇文章主要介绍了JavaScript对象新增方法defineProperty与keys的使用说明,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
这篇文章主要为大家详细介绍了JavaScript实现鼠标拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论