当前位置：
首页 >
js简单实现切换图片上一张下一张功能
发布时间：2023/12/10
52
豆豆
生活随笔
收集整理的这篇文章主要介绍了
js简单实现切换图片上一张下一张功能
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>照片点击切换</title>
</head>
<style>*{margin:0;padding:0;}#picBox{margin:100px auto;width:600px;height:400px;}#pic{width:600px;height:400px;}#buttonBox{width:150px;margin:10px auto;}
</style>
<body>
<div id="picBox"><img src="1.jpg" id="pic"><div id="buttonBox"><input type="button" value="上一张" onclick="pre();"><input type="button" value="下一张" onclick="next();"></div>
</div>
<script>var picArr=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");var index=0;function next(){index++;if(index==picArr.length){index=0;}document.getElementById("pic").src=picArr[index];}function pre(){index--;if(index<0){index=picArr.length-1;}document.getElementById("pic").src=picArr[index];}
</script>
</body>
总结
以上是生活随笔为你收集整理的js简单实现切换图片上一张下一张功能的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： [Webapp]国内移动端浏览器占比
- 下一篇： 【Vegas原创】ASP 0131 不允