使用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>
總結
以上所述是小編給大家介紹的使用JavaScript實現(xiàn)點擊循環(huán)切換圖片效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
下面小編就為大家?guī)硪黄僯s實現(xiàn)頁面返回頂部的動畫(超簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了基于Fixed定位的框選功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
下面小編就為大家?guī)硪黄狫S動態(tài)給對象添加屬性和值的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家詳細介紹了JavaScript自定義日歷實現(xiàn)簽到功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了前端流式輸出的三種實現(xiàn)方法,流式輸出在前端開發(fā)中用于逐步處理和顯示數(shù)據(jù),特別是對于大型數(shù)據(jù)集和實時數(shù)據(jù),文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了JavaScript模擬實現(xiàn)鍵盤打字效果,本文直接給出實例代碼,需要的朋友可以參考下2015-06-06
解決FLASH需要點擊激活的代碼...2006-12-12
比JSON.stringify快兩倍的fast-json-stringify性能對比分析
這篇文章主要為大家介紹了比JSON.stringify快兩倍的fast-json-stringify性能對比分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
bootstrap為水平排列的表單和內(nèi)聯(lián)表單設置可選的圖標
為水平排列的表單和內(nèi)聯(lián)表單設置可選的圖標。本文通過示例代碼給大家講解，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02
一般情況下的單條件篩選，數(shù)組的filter方法就能夠滿足需求，本文討論的重點是多條件下的復合篩選，并列出了幾個相關知識點，感興趣的可以了解一下2021-07-07