JS對(duì)img進(jìn)行操作(換圖片/切圖/輪換/停止)
更新時(shí)間：2013年04月17日 11:52:13 作者：
JS對(duì)img進(jìn)行操作包括:換圖片/切圖/輪換/停止輪換等等，在本文將逐一實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js知識(shí)有所幫助
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var i = 1; var n;
function showImg() {
if (document.getElementById('img').getAttribute("src") == "images/1.jpg") {
document.getElementById('img').setAttribute("src","images/2.jpg");
}
else {
document.getElementById('img').setAttribute("src","images/1.jpg");
}
}
function showImg1() {
document.getElementById('img').setAttribute("src", "images/" + i + ".jpg"); i++;
if (i > 10)
{
i = 1;
}
}
function show() {
n=setInterval(showImg1, 500);
}
function show1() {
clearInterval(n);
}
</script>
</head>
<body>
<img id="img" alt="" src="images/1.jpg" width="200" height="200" />
<input id="Button1" type="button" value="換圖片" onclick="showImg()" />
<input id="Button2" type="button" value="切圖" onclick="showImg1()" />
<input id="Button3" type="button" value="輪換" onclick="show()" />
<input id="Button4" type="button" value="停止輪換" onclick="show1()" />
</body>
</html>
相關(guān)文章
JsonServer安裝及啟動(dòng)過(guò)程圖解
這篇文章主要介紹了JsonServer安裝及啟動(dòng)過(guò)程圖解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要給大家介紹了關(guān)于JavaScript this關(guān)鍵字的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義狀態(tài)欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
給你的網(wǎng)站加上代碼統(tǒng)計(jì)!常用的方法是直接加統(tǒng)計(jì)代碼到網(wǎng)頁(yè),但你的網(wǎng)頁(yè)數(shù)量很多呢?2011-01-01
javascript實(shí)現(xiàn)簡(jiǎn)單查找與替換的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)簡(jiǎn)單查找與替換的方法,涉及javascript針對(duì)頁(yè)面查找與替換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
Handtrack.js庫(kù)實(shí)現(xiàn)實(shí)時(shí)監(jiān)測(cè)手部運(yùn)動(dòng)(推薦)
這篇文章主要介紹了實(shí)時(shí)監(jiān)測(cè)手部運(yùn)動(dòng)的 JS 庫(kù)，可以實(shí)現(xiàn)很多有趣功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了js操作模態(tài)窗口及父子窗口間相互傳值,需要的朋友可以參考下2014-06-06
JavaScript彈出新窗口并控制窗口移動(dòng)到指定位置的方法
這篇文章主要介紹了JavaScript彈出新窗口并控制窗口移動(dòng)到指定位置的方法,涉及javascript針對(duì)彈出窗口的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這兩天一直在弄ajax，用多了才發(fā)現(xiàn)了ajax?的cache問(wèn)題，請(qǐng)求了好多次，得到了確是相同的結(jié)果，經(jīng)常我想在請(qǐng)求的同時(shí)去做一些其它的事情，我在想javascript里有沒(méi)有辦法用多線程，經(jīng)過(guò)在網(wǎng)上查找找到了結(jié)果。2008-11-11