使用JavaScript實現(xiàn)點擊循環(huán)切換圖片效果
更新時間:2017年09月03日 11:40:22 作者:donow81
本文通過實例代碼給大家介紹了通過js實現(xiàn)點擊循環(huán)切換圖片效果,需要的朋友參考下
廢話不多說了,直接給大家貼代碼了,具體代碼如下所述:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>單擊循環(huán)切換圖片</title> <script> var i = 1; function nextImg(){ i++; //步驟2:獲取頁面元素 var next = document.getElementById("nImg"); //步驟3:更改元素的src屬性 next.src = "img/"+i+".jpg"; if(i==3){ i=0; } } </script> </head> <body> <div> <!--步驟1:綁定onclick事件--> <button onclick="nextImg()">下一張</button> <br /> <!--需自己準備3張圖片--> <img src="img/1.jpg" id="nImg" width="600px" height="400px" /> </div> </body> </html>
總結(jié)
以上所述是小編給大家介紹的使用JavaScript實現(xiàn)點擊循環(huán)切換圖片效果,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
相關文章
批量下載對路網(wǎng)圖片并生成html的實現(xiàn)方法
下面小編就為大家?guī)硪黄肯螺d對路網(wǎng)圖片并生成html的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考2016-06-06JavaScript中的作用域與閉包、原型與原型鏈、異步與單線程
JavaScript的三座大山指的是:作用域和閉包、原型和原型鏈、異步與單線程,這些概念在日常的開發(fā)工作中經(jīng)常被提及,并對我們理解和編寫高質(zhì)量的JavaScript代碼至關重要2024-02-02基于JavaScript實現(xiàn)文件共享型網(wǎng)站
Any?Share?是一種簡單、輕量、快速的文件共享服務。使用?Javascript?編寫,并搭建在?Firebase?平臺。本文將利用它實現(xiàn)創(chuàng)建文件共享型網(wǎng)站,感興趣的可以了解一下2022-11-11js調(diào)試系列 斷點與動態(tài)調(diào)試[基礎篇]
上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎知識,支持亂碼兄弟為大家?guī)砹薺s斷點與動態(tài)調(diào)試方法,需要的朋友可以參考下2014-06-06