js简单实现切换图片上一张下一张功能
生活随笔
收集整理的這篇文章主要介紹了
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 不允