快捷導(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)文章

批量下載對路網(wǎng)圖片并生成html的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄肯螺d對路網(wǎng)圖片并生成html的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考
2016-06-06
原生javascript實(shí)現(xiàn)連連看游戲
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)連連看游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-01-01
JS原形與原型鏈深入詳解
這篇文章主要介紹了JS原形與原型鏈,結(jié)合實(shí)例形式深入分析了JS原型鏈、繼承、組合繼承等相關(guān)原理、操作技巧及注意事項,需要的朋友可以參考下
2020-05-05
關(guān)于layer.js使用心得-向彈出框傳值問題
這篇文章主要介紹了關(guān)于layer.js使用心得-向彈出框傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-11-11
JavaScript中Promise的使用方法實(shí)例
現(xiàn)在不會用Promise都不好意思說自己是前端,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Promise使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
JavaScript中的作用域與閉包、原型與原型鏈、異步與單線程
JavaScript的三座大山指的是:作用域和閉包、原型和原型鏈、異步與單線程,這些概念在日常的開發(fā)工作中經(jīng)常被提及,并對我們理解和編寫高質(zhì)量的JavaScript代碼至關(guān)重要
2024-02-02
JavaScript引用賦值與傳值賦值總結(jié)
這篇文章主要介紹了JavaScript引用賦值與傳值賦值總結(jié)，在JavaScript中基本數(shù)據(jù)類型都是傳值賦值，復(fù)合數(shù)據(jù)類型都是引用賦值(傳地址)也叫引用傳址，下文更多相關(guān)資料，需要的小伙伴可以參考一下
2022-05-05
基于JavaScript實(shí)現(xiàn)文件共享型網(wǎng)站
Any?Share?是一種簡單、輕量、快速的文件共享服務(wù)。使用?Javascript?編寫，并搭建在?Firebase?平臺。本文將利用它實(shí)現(xiàn)創(chuàng)建文件共享型網(wǎng)站，感興趣的可以了解一下
2022-11-11
js調(diào)試系列斷點(diǎn)與動態(tài)調(diào)試[基礎(chǔ)篇]
上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎(chǔ)知識，支持亂碼兄弟為大家?guī)砹薺s斷點(diǎn)與動態(tài)調(diào)試方法，需要的朋友可以參考下
2014-06-06
淺析JavaScript中變量提升的原理與使用
前端的小伙伴大概都知道，js中的var變量存在變量提升，在es6以后隨著let變量的出現(xiàn)，變量提升問題得以解決，那么變量提升的原理是什么，es6又是怎么解決變量提升問題的，下面我們來共同探尋答案
2023-05-05