js实现简单图片切换
更新时间：2022年07月12日 09:34:35 作者：PCC.
这篇文章主要为大家详细介绍了js实现简单图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现图片间切换的具体代码，供大家参考，具体内容如下
代码的主要思路：
1、先给“下一张”和“上一张”两个按钮绑定单击响应事件；
2、获取img标签对象，用于修改src属性的值，实现图片的切换；
3、切换图片实质上就是修改img标签里面src属性的值；
4、创建一个数组用来保存图片，这样的话，在图片切换的过程中操作起来会更加方便，只要操作数组的索引即可，如要切换到下一张，将imgArr[0]---->imgArr[1]，即可；
5、创建一个变量用来保存当前正在显示的图片的索引，这样操作图片更加简单；
6、需要注意的是，如果当前显示的图片为最后一张时，下一张使它自动跳回第一张；同理如果当前显示的图片为第一张时，上一张使它自动跳回最后一张；
7、设置顶部的文字先要获取对应的p标签对象；
8、通过修改p标签里面的文字就可以实现顶部文字的实时变换；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
margin: 50px auto;
padding: 30px;
background-color: aquamarine;
}
</style>
<script type="text/javascript">
window.onload = function () {
/**
* 点击按钮实现图片的切换
*/
//3、获取img标签
var img = document.getElementsByTagName("img")[0];
//5、创建一个数组用于保存图片的路径
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
//6、创建一个变量保存当前正在显示的图片的索引
var index = 0;//默认显示的是第一张
//8、获取id为info的元素
var info = document.getElementById("info");
//9、设置提示文字
info.innerHTML = "一共" + imgArr.length + "张图片， 这是第" + (index + 1) + "张";
//1、给上一张按钮绑定单击事件
var prev = document.getElementById("prev");
prev.onclick = function () {
//7、当索引为第一张时，那么就要将索引设置为最后一张，由于采用的是--index，所以将index设置为5
if (index == 0) {
index = 5;
}
index = index - 1;
//4、切换图片，实质上就是修改img里面的src属性
img.src = imgArr[index];
//9、设置提示文字
info.innerHTML = "一共" + imgArr.length + "张图片， 这是第" + (index + 1) + "张";
}
//2、给下一张按钮绑定单击事件
var next = document.getElementById("next");
next.onclick = function () {
//7、当索引为最后一张时，那么就要将索引设置为第一张，由于采用的是++index，所以将index设置为-1
if (index == 4) {
index = -1;
}
index = index + 1;
//4、切换图片，实质上就是修改img里面的src属性
img.src = imgArr[index];
//9、设置提示文字
info.innerHTML = "一共" + imgArr.length + "张图片， 这是第" + (index + 1) + "张";
}
}
</script>
</head>
<body>
<div id=outer align="center">
<p id=info></p>
<img src="img/1.jpg" alt="冰棍"/><br/>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>完成后的效果：每次点击下一张或者上一张会实现图片的切换，同时顶部的提示文字也会随之发生改变。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
函数是由关键字function、函数名加一组参数及置于大括号中需要执行的一段语义定义的。今天我们就来详细讲解一下JavaScript中的Function。2015-02-02
全面解析JavaScript中的valueOf与toString方法(推荐)
本文给大家介绍JavaScript中的valueOf与toString方法，valueOf() 方法可返回 Boolean 对象的原始值，toString() 方法可把一个逻辑值转换为字符串，并返回结果。对js中valueof和tostring相关知识感兴趣的朋友一起学习吧2016-06-06
这篇文章主要介绍了VSCode格式化JS自动添加或去掉分号的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
这篇文章主要介绍了mapboxgl实现带箭头轨迹线的代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了 JavaScript中 创建动态 QML 对象，下面文章主要分析了两中方法，分别是从 QML 字符串创建对象和动态创建组件以及删除对象等方法，具有有一定的参考价值，需要的小伙伴可以参考一下2021-12-12
利用javascript中的call实现继承...2007-01-01
这篇文章主要介绍了mpvue网易云短信接口实现小程序短信登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了Javascript中对象继承的实现,需要的朋友可以参考下2014-05-05
这篇文章主要分享javascript实现动态模态绑定grid过程代码,比较实用，需要的朋友可以参考下2014-09-09
本文主要介绍了浅谈JS数组内置遍历方法有哪些和区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
最新评论