快捷導(dǎo)航

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

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

本文通過實(shí)例代碼給大家介紹了通過js實(shí)現(xiàn)點(diǎ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 />
<!--需自己準(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)切換圖片效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

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