您的位置：首页 > Web前端 > JavaScript

JavaScript实现切换多张图片

2021-02-01 04:07 1031 查看

本文实例为大家分享了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>

预览效果：

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 切换图片

相关文章推荐

新的分享

章节导航