使用JavaScript實(shí)現(xiàn)點(diǎn)擊循環(huán)切換圖片效果

更新時(shí)間：2017年09月03日 11:40:22 作者：donow81

本文通過(guò)實(shí)例代碼給大家介紹了通過(guò)js實(shí)現(xiàn)點(diǎn)擊循環(huán)切換圖片效果，需要的朋友參考下

廢話不多說(shuō)了，直接給大家貼代碼了，具體代碼如下所述：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>單擊循環(huán)切換圖片</title>
<script>
var i = 1;
function nextImg(){
i++;
//步驟2：獲取頁(yè)面元素
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 />
<!--需自己準(zhǔn)備3張圖片-->
<img src="img/1.jpg" id="nImg" width="600px" height="400px" />
</div>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的使用JavaScript實(shí)現(xiàn)點(diǎn)擊循環(huán)切換圖片效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

純js實(shí)現(xiàn)頁(yè)面返回頂部的動(dòng)畫(超簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇純js實(shí)現(xiàn)頁(yè)面返回頂部的動(dòng)畫(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
基于Fixed定位的框選功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Fixed定位的框選功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
JS動(dòng)態(tài)給對(duì)象添加屬性和值的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS動(dòng)態(tài)給對(duì)象添加屬性和值的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
JavaScript自定義日歷實(shí)現(xiàn)簽到功能
這篇文章主要為大家詳細(xì)介紹了JavaScript自定義日歷實(shí)現(xiàn)簽到功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
前端流式輸出的三種實(shí)現(xiàn)方法
這篇文章主要介紹了前端流式輸出的三種實(shí)現(xiàn)方法,流式輸出在前端開(kāi)發(fā)中用于逐步處理和顯示數(shù)據(jù),特別是對(duì)于大型數(shù)據(jù)集和實(shí)時(shí)數(shù)據(jù),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-11-11
JavaScript模擬實(shí)現(xiàn)鍵盤打字效果
這篇文章主要介紹了JavaScript模擬實(shí)現(xiàn)鍵盤打字效果,本文直接給出實(shí)例代碼,需要的朋友可以參考下
2015-06-06
解決FLASH需要點(diǎn)擊激活的代碼
解決FLASH需要點(diǎn)擊激活的代碼...
2006-12-12
比JSON.stringify快兩倍的fast-json-stringify性能對(duì)比分析
這篇文章主要為大家介紹了比JSON.stringify快兩倍的fast-json-stringify性能對(duì)比分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
bootstrap為水平排列的表單和內(nèi)聯(lián)表單設(shè)置可選的圖標(biāo)
為水平排列的表單和內(nèi)聯(lián)表單設(shè)置可選的圖標(biāo)。本文通過(guò)示例代碼給大家講解，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-02-02
JS實(shí)現(xiàn)數(shù)組過(guò)濾從簡(jiǎn)單到多條件篩選
一般情況下的單條件篩選，數(shù)組的filter方法就能夠滿足需求，本文討論的重點(diǎn)是多條件下的復(fù)合篩選，并列出了幾個(gè)相關(guān)知識(shí)點(diǎn)，感興趣的可以了解一下
2021-07-07