當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS简单实现图片上一张下一张操作
生活随笔
收集整理的這篇文章主要介紹了
JS简单实现图片上一张下一张操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
簡單實現了js的圖片上一張下一張效果，沒怎么做css美化單純就是想記錄一下js部分。
效果圖：嘿嘿，wuli爽妹子鎮圖！！
?
<!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="s1.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("s1.jpg","s2.jpg","s3.jpg","s4.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> </html>?
?
?
總結
以上是生活随笔為你收集整理的JS简单实现图片上一张下一张操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 正则表达式引擎的构建——基于编译原理DF
- 下一篇： javascript-04 引用类型