圖片輪換效果實(shí)現(xiàn)代碼(點(diǎn)擊按鈕停止執(zhí)行)

更新時(shí)間：2013年04月12日 17:16:53 作者：

在這個(gè)實(shí)例中需要注意的是，要把images文件夾下圖片的命名設(shè)置為有順序的，1、2、3..才可以，感興趣的朋友可以參考下

在這個(gè)小程序中，需要把images文件夾下圖片的命名設(shè)置為有順序的，1、2、3……

 
<script type="text/javascript"> 
var imgnumb = 1; 
function imgfor() { 
imgnumb++; 
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg'); 
if (imgnumb == 5) { //共5張圖片 
imgnumb = 0; 
} 
} 
var clearid; 
function clearfun() { 
clearInterval(clearid); 
} 
clearid=setInterval(imgfor, 500); 
</script> 
</head> 
<body> 
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" /> 
<input type="button" value="結(jié)束執(zhí)行" onclick="clearfun();" /> 
</body> 
var imgnumb = 1; 
function imgfor() { 
imgnumb++; 
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg'); 
if (imgnumb == 5) { 
imgnumb = 0; 
} 
} 
var clearid; 
function clearfun() { 
clearInterval(clearid); 
} 
clearid=setInterval(imgfor, 500); 
</script> 
</head> 
<body> 
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" /> 
<input type="button" value="結(jié)束執(zhí)行" onclick="clearfun();" /> 
</body> 

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)例分享---具有立體效果的圖片特效
此實(shí)例，直接粘貼代碼即可運(yùn)行，當(dāng)然圖片的路徑不要忘記改了。
2014-06-06
javascript 窗口加載蒙板內(nèi)嵌網(wǎng)頁(yè)內(nèi)容
用于在現(xiàn)有窗口上加載蒙板，在蒙板內(nèi)在嵌入其他頁(yè)面內(nèi)容
2010-11-11
js new Date()實(shí)例測(cè)試
在本篇文章中小編給各位整理的是關(guān)于js new Date()測(cè)試的相關(guān)實(shí)例代碼，有需要的朋友們參考學(xué)習(xí)下。
2019-10-10
詳解babel是如何將class語(yǔ)法糖轉(zhuǎn)換為es5的語(yǔ)法
這篇文章主要詳細(xì)介紹了babel是如何將class語(yǔ)法糖轉(zhuǎn)換為es5的語(yǔ)法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02
javascript 動(dòng)態(tài)添加事件代碼
往往我們需要在 JS 中動(dòng)態(tài)添加事件，這就涉及到瀏覽器兼容性問(wèn)題了，以下談及的幾種方法，我們也常常混合使用。
2008-11-11
JS前端知識(shí)點(diǎn)總結(jié)之內(nèi)置對(duì)象，日期對(duì)象和定時(shí)器相關(guān)操作
這篇文章主要介紹了JS前端知識(shí)點(diǎn)總結(jié)之內(nèi)置對(duì)象，日期對(duì)象和定時(shí)器相關(guān)操作,簡(jiǎn)單總結(jié)分析了JS內(nèi)置對(duì)象，日期對(duì)象和定時(shí)器相關(guān)對(duì)象方法及使用技巧,需要的朋友可以參考下
2019-07-07
微信小程序生成攜帶參數(shù)的二維碼
這篇文章主要介紹了微信小程序生成攜帶參數(shù)的二維碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值
2019-10-10
原生JS實(shí)現(xiàn)無(wú)縫輪播圖片
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)無(wú)縫輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
解決mui框架中switch開(kāi)關(guān)通過(guò)js控制開(kāi)或者關(guān)狀態(tài)時(shí)小圓點(diǎn)不動(dòng)的問(wèn)題
今天小編就為大家分享一篇解決mui框架中switch開(kāi)關(guān)通過(guò)js控制開(kāi)或者關(guān)狀態(tài)時(shí)小圓點(diǎn)不動(dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
實(shí)例講解javascript實(shí)現(xiàn)異步圖片上傳方法
給大家詳細(xì)講解一下如何通過(guò)javascript寫(xiě)出異步圖片上傳，并且把實(shí)例代碼給大家分享了下，有興趣的讀者們測(cè)試一下吧。
2017-12-12