JavaScript实现切换多张图片
作者:是M 发布时间:2024-04-17 09:54:18
标签:js,切换,图片
本文实例为大家分享了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


猜你喜欢
- 前言因为工作中不怎么使用python,所以对python的了解不够,只是在使用的时候才去学,在之前的几个例子中几乎没使用什么python的特
- 调用tf.reset_default_graph()重置计算图当在搭建网络查看计算图时,如果重复运行程序会导致重定义报错。为了可以在同一个线
- 前言有时候在使用Python处理比较耗时操作的时候,为了便于观察处理进度,这时候就需要通过进度条将处理情况进行可视化展示,以便我们能够及时了
- 本来在网上有不少关于这方面的文章,可是我找了好久也没看到把(可能我的搜索水平有线把)不过倒是聊天室的很多。如何统计会员再线状态,希望对刚开始
- 通过第三方库exifread读取照片信息。exifread官网:https://pypi.org/project/ExifRead/一、安装
- 浏览器的开发者在很早的时候就已经意识到, HTTP's 的无状态会对Web开发者带来很大的问题,于是(cookies)应运而生。 c
- 本文介绍在Anaconda环境中,安装Python语言pydot与graphviz两个模块的方法。最近进行随机森林(RF)的树的可视化操作,
- 许多网站缺乏针对性和友好的导航设计,难以找到连接到相关网页的路径,也没有提供有助于让访客/用户找到所需信息的帮助,用户体验非常糟糕。本期薯片
- 如何用拦截表单的方法上传图片? 看下列代码:<script language="
- 1.不装入数据库而启动事例 可以不装入数据库而启动事例,一般是在数据库才创建时才可以这样做:STARTUP NOMOUNT2.启动事例并装入
- getDatagetData方法主要是获取方法的元数据metadata。getData实现上借助metaMap和noop两个内部方法。met
- 题目描述这篇博文是数字图像处理的大作业. 题目描述:给定40张不同风格的纹理图片,大小为512*512,要求将每张图片分为大小相同的9块,利
- 第一种,在方法后面加问号,然后执行,如 abs?第二种,光标移动到方法上面,按shift+tab,弹出文档,连续按选择文档详细程度补充知识:
- 前言1 简介Kepler.gl作为一款强大的开源地理信息数据可视化工具,可以帮助我们轻松制作针对大规模矢量数据的可视化作品,从而辅助数据分析
- 一、Beautiful Soup的安装Beautiful Soup是Python的一个HTML或XML的解析库,使用它可以很方便地从网页中提
- MyISAM类型的表强调的是性能,其执行数度比InnoDB类型更快,但是不提供事务支持,而InnoDB提供事务支持已经外部键等高级数据库功能
- 我们一般采用photoshop等做图工具制作电视扫描线效果图片:首先做一个黑白相间的图案,然后用这个图案进行填充,再调整图层的模式或者透明度
- 前言诶?这有一个按钮(~ ̄▽ ̄)~,这是一个在html中实现的具有金属质感并且能镜面反射的按钮~效果电脑效果手机效果说明主要思路是使用 na
- 在Udacity上课时学到了python的turtle方法,这是一个很经典的用来教小孩儿编程的图形模块,最早起源于logo语言。python
- 因客户需求,要把数据库里的索引编号做成五位长度的,且能自动累加编号,我只会在SQL中使用Identity自动编号:Create Table