JS实现图片上下切换的具体代码
以下是JS实现图片上下切换的具体代码，供大家参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#outer{
width:130px;
margin:50px auto;
padding:10px;
background-color:greenyellow;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var prev=document.getElementById("prev");
var next=document.getElementById("next");
//切换图片就是修改img的src属性 //获取img标签 var img=document.getElementsByTagName("img")[0]; //创建数组，保存图片路径 var imgArr=["1.png","2.png","3.png"]; //创建变量保存当前显示图片的索引 var index=0; //设置提示文字 var info=document.getElementById("info"); info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"; prev.onclick=function(){
index–;
//判断index是否小于0
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
}
next.onclick=function(){
index++;
if(index>imgArr.length-1){
index=0;
}
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
}
}
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="1.png" alt="1">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
效果图
使用以上代码可以实现的效果如下图所示：
以上就是关于JS实现图片上下切换的详细内容，希望对大家有所帮助。
原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7370.html
相关推荐
-
argocd安装和使用
小本本介绍 大家好，我是本际云服务器推荐网的小编小本本，今天我来为大家介绍一个名为argocd的gitops工具。 argocd的功能及安装 argocd是一款功能强大的gitop…
-
Elasticsearch集群分布式模型及选主与脑裂问题
关于Elasticsearch集群分布式模型 Elasticsearch是一个分布式的搜索和分析引擎，具有水平扩展性和可靠性，能够处理PB级别的数据。Elasticsearch的分…
-
阿里云服务器Tomcat无法访问的问题
配置防火墙 在使用云服务器时，为了保证服务器的安全性，需配置防火墙。首先需要检查防火墙的状态是否为开启状态，通过命令”systemctl status firewall…
-
Centos7环境下Gitlab安装部署
Centos7环境下Gitlab安装部署 你好，我是本际云服务器推荐网的小编小本本。本文将介绍如何在Centos7环境下安装和部署Gitlab。 安装和配置Gitlab 以下是Gi…
-
疑难诊断之六步ORA-600擒龙法
ORA-600擒龙法：六步疑难诊断方法 本篇文章将介绍本际云服务器推荐网的小编小本本的6步擒龙法，帮助您找出ORA-600的元凶。 具体步骤 1. 查看DBALERT日志 首先查看…
-
TIDB中TiKV详解
TiKV详解 作为一个分布式事务型的键值数据库，TiKV提供了满足ACID约束的分布式事务接口，并通过Raft协议保证了多副本数据一致性以及高可用。TiKV是TiDB的存储层，提供…
-
网络排查工具MTR怎么用？
介绍MTR工具 常用的ping，tracert，nslookup一般用来判断主机的网络连通性，但在网络诊断方面，有一个更好用的工具——mtr。mtr全称mytraceroute，是…
-
KIBANA绘图及操作指引
KIBANA绘图及操作指引 欢迎来到本际云服务器推荐网，我是小编小本本。下面是关于KIBANA绘图及操作的指引： 【开发】性能分析趋势图 在业务需求中，统计数据为Y轴，日期为X轴，…
-
SQL执行计划COE绑定后依旧频繁变化问题分析
SQL执行计划COE绑定后依旧频繁变化问题分析 大家好，我是本站的小编小本本。今天我要和大家分享一个SQL使用COE脚本绑定执行计划后，执行计划依旧出现频繁变化的问题。 问题分析 …
-
什么是cdhkerberos
您好，我是本际云服务器推荐网的小编小本本。今天我们要谈论的是CDH集群中的Kerberos，它是如何为Hadoop服务提供安全认证的。 Kerberos是什么？ Kerberos是…