js点击按钮实现多张图片循环切换
更新时间：2022年01月25日 10:48:38 作者：丁七岁
这篇文章主要为大家详细介绍了js点击按钮实现多张图片循环切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js点击按钮实现多张图片循环切换的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>点击按钮实现多张图片的循环切换</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.img-wrapper {
width: 520px;
height: 520px;
background-size: contain;
overflow: hidden;
margin: 50px auto;
background-color: green;
}
.img-wrapper img{
width: 533px;
height: 300px;
}
.img-wrapper p {
text-align: center;
height: 20px;
line-height: 20px;
font-size: 16px;
margin-bottom: 10px;
margin-top: 8px;
}
.img-wrapper button {
margin: 12px 93px;
font-size: 18px;
}
</style>
<script type="text/javascript">
window.onload = function () {
let prev = document.getElementById("prev");
let next = document.getElementById("next");
let img = document.getElementsByTagName("img")[0];
let info = document.getElementById("info");
//创建一个数组存储照片的路径
let imgArr = ["img/111.jpg", "img/222.jpg", "img/333.jpg", "img/444.jpg", "img/555.jpg", "img/666.jpg"];
let index = 0;
info.innerText = "一共有" + imgArr.length + "张照片，现在是第" + (index + 1) + "张";
prev.onclick = function () {
index--;
prev.style.backgroundColor="#ff4c31";
if (index < 0) {
index = imgArr.length - 1;
}
img.src = imgArr[index];
info.innerText = "一共有" + imgArr.length + "张照片，现在是第" + (index + 1) + "张";
};
next.onclick = function () {
index++;
next.style.backgroundColor="#ff4c31";
if (index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
info.innerText = "一共有" + imgArr.length + "张照片，现在是第" + (index + 1) + "张";
};
};
</script>
</head>
<body>
<div class="img-wrapper">
<p id="info"></p>
<img src="img/111.jpg">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天用JS允许一个ActiveX，挺耗时的，想在允许时提示用户正在允许，而不至于漏斗在那里2010-11-11
JavaScript es6中var、let以及const三者区别案例详解
这篇文章主要介绍了JavaScript es6中var、let以及const三者区别案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了页面实时更新时间的JS实例代码，有需要的朋友可以参考一下2013-12-12
JavaScript中的Array对象与其他编程语言中的数组一样，是一组数据的集合。在JavaScript中，数组里面的数据可以是不同类型的，并具有用于执行数组常见操作的方法，本文整理了一些常用的，需要的可以参考一下2022-09-09
javascript复制粘贴与clipboardData的使用
window.clipboardData可以实现复制与粘贴的操作，下面有个小示例，想学习的朋友可以参考下2014-10-10
本篇文章小编为大家介绍，js随机颜色代码的多种实现方式。需要的朋友参考下2013-04-04
这篇文章主要介绍了基于JS实现数字+字母+中文的混合排序方法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JavaScript 变量、作用域及内存,需要的朋友可以参考下2015-04-04
layui监听复选框checkbox选中以及分页选中处理方式
这篇文章主要介绍了layui监听复选框checkbox选中以及分页选中处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2019-09-09
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
这篇文章主要介绍了手写的一个兼容各种浏览器的javascript getStyle函数,用来取元素的样式,需要的朋友可以参考下2014-06-06
最新评论