JavaScript实现切换多张图片
更新时间：2021年01月27日 11:13:55 作者：是M
这篇文章主要为大家详细介绍了JavaScript实现切换多张图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
预览效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了微信小程序骨架屏的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
命名空间是通过为项目或库创建一个全局对象，然后将所有功能添加到该全局变量中。通过减少程序中全局变量的数量，实现单全局变量，从而在具有大量函数、对象和其他变量的情况下不会造成全局污染，同时也避免了命名冲突等问题2013-11-11
使用ionic开发app的时候，会发现切换页面的动画会卡顿，并不流畅，为了保证用户体验，大家采用cordova提供的native transitions可以让页面切换近乎原型的体验，一起通过本文学习下具体实现思路2016-12-12
这篇文章主要为大家详细介绍了微信小程序实现顶部普通选项卡效果，非swiper，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
javascript之循环停顿上下滚动...2007-08-08
在进行微信公众账号开发的时候，需要知道当前的浏览器是微信内置的浏览器，那么如何判断呢？这是就只有通过浏览器的User Agent来进行判断了2014-09-09
这篇文章主要介绍了包含中国城市的javascript对象,以一个javascript的json数据格式存储为例分析了javascript存储城市信息的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了微信小程序如何设置基本的页面样式，做出用户界面UI。如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。2022-12-12
《javascript设计模式》学习笔记一：Javascript面向对象程序设计对象成员的定义分析
这篇文章主要介绍了《javascript设计模式》学习笔记Javascript面向对象程序设计对象成员的定义,结合实例形式分析了《javascript设计模式》中JavaScript面向对象程序设计的原理、定义、用法及操作注意事项,需要的朋友可以参考下2020-04-04
本篇文章主要介绍了使用Ajax与服务器（JSON）通信方法，Ajax提供了两类服务器通信手段：同步通信和异步通信。有需要的可以了解一下。2016-11-11
最新评论