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)文章
微信公眾號(hào)網(wǎng)頁(yè)分享功能開發(fā)的示例代碼
這篇文章主要介紹了微信公眾號(hào)網(wǎng)頁(yè)分享功能開發(fā)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
本文主要介紹了JavaScript 計(jì)算誤差的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要為大家詳細(xì)介紹了JS中對(duì)Cookie的具體操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
做一個(gè)鼠標(biāo)移入移出圖片事件，首先是改變分辨率的兩種方法，鼠標(biāo)移入圖片和移出圖片的分辨率不同，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了JavaScript操作XML文件之XML讀取方法,涉及javascript操作XML文件的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了JS原型對(duì)象和原型鏈，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了Webpack的dll功能使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
JS常見創(chuàng)建類的方法小結(jié)【工廠方式,構(gòu)造器方式,原型方式,聯(lián)合方式等】
這篇文章主要介紹了JS常見創(chuàng)建類的方法,結(jié)合實(shí)例形式總結(jié)分析了工廠方式,構(gòu)造器方式,原型方式,聯(lián)合方式等常見的javascript創(chuàng)建類的常用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
JavaScript中Iterator迭代器接口和循環(huán)
這篇文章主要介紹了JavaScript中Iterator迭代器接口和循環(huán)，迭代器是數(shù)據(jù)結(jié)構(gòu)遍歷的一種機(jī)制迭代器主要是提供for...of使用，更多相關(guān)內(nèi)推需要的小伙伴可以參考下面文章內(nèi)容2022-06-06
這篇文章主要介紹了JavaScript onclick事件使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05