JavaScript实现切换多张图片
作者：是M 时间：2024-04-17 09:54:18
本文实例为大家分享了JavaScript实现切换多张图片的具体代码，供大家参考，具体内容如下
循环切换图片
HTML+CSS+JavaScript
html部分
<body>
<div class="outer">
<p id="info"></p>
<img src="./images/banner1.png" alt="图片" title="图片">
<button id='prev'>上一张</button>
<button id='next'>下一张</button>
</div>
</body>
css部分
<style>
* {
padding: 0;
margin: 0;
}
.outer {
width: 1000px;
background-color: #bfa;
margin: 50px auto;
text-align: center;
padding: 10px;
}
img {
width: 900px;
display: block;
margin: 0 auto;
}
button {
margin: 5px;
}
</style>
JavaScript部分
这里用到了JavaScript的DOM对象
<script>
// 加载文档
window.onload = function () {
//获取img标签
var img = document.getElementsByTagName("img")[0];
//创建一个数组保存所有图片的路径
//这里设置图片文件的路径
var imgArr = ["./images/banner1.png", "./images/banner2.png", "./images/banner3.png", "./images/banner4.png", "./images/banner5.png"];
//设置图片初始值
var index = 0;
//获取id为info的p标签
var info = document.getElementById("info");
info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
//绑定两个按钮
//上一张
document.getElementById("prev").onclick = function () {
index--;
//判断index是否小于0
if (index < 0) {
index = imgArr.length - 1;//循环(第一张-》最后一张)
}
img.src = imgArr[index];
info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
};
//下一张
document.getElementById("next").onclick = function () {
index++;
//判断index是否大于数组的长度-1(数组的最大下标)
if (index > imgArr.length - 1) {
index = 0;//循环(最后一张-》第一张)
}
img.src = imgArr[index];
info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
}
};
</script>
预览效果：
来源：https://blog.csdn.net/qq_45908053/article/details/113173940
标签：js,切换,图片
0
投稿猜你喜欢
python目标检测基于opencv实现目标追踪示例
2022-05-10 13:12:30
js模拟实现Array的sort方法
2024-04-10 11:03:22
Git 命令使用技巧提供工作效率
2022-05-11 18:01:33
1500个绚丽主题 谷歌中国个人风格首页发布
2008-11-12 11:14:00
浅谈SQL Server中的三种物理连接操作(性能比较)
2024-01-25 22:11:56
手机浏览器唤起微信分享(JS)
2024-04-19 09:56:18
numpy实现RNN原理实现
2023-09-21 23:47:33
Python实现批量word文档转pdf并统计其页码
2023-08-19 13:29:40
通过实例解析Python调用json模块
2022-09-22 02:05:06
何处安放的Loading
2011-08-10 19:11:20
python基础教程之基本数据类型和变量声明介绍
2023-08-28 22:45:55
详解PHP如何更好的利用PHPstorm的自动提示
2024-05-22 10:05:30
python中自带的三个装饰器的实现
2021-10-28 02:31:52
PyQt5-QDateEdit的简单使用操作
2022-09-16 17:35:51
asp 去掉html中的table正则代码函数
2011-04-06 10:48:00
在Django中动态地过滤查询集的实现
2023-06-15 12:20:15
Python基于pandas实现json格式转换成dataframe的方法
2021-08-23 23:09:01
Python求出0~100以内的所有素数
2023-09-17 16:54:02
asp.net mvc4 mysql制作简单分页组件（部分视图）
2024-01-27 17:56:36
pandas groupby 用法实例详解
2023-07-19 01:37:59