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-05JS常見創(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-04JavaScript中Iterator迭代器接口和循環(huán)
這篇文章主要介紹了JavaScript中Iterator迭代器接口和循環(huán),迭代器是數(shù)據(jù)結(jié)構(gòu)遍歷的一種機(jī)制迭代器主要是提供for...of使用,更多相關(guān)內(nèi)推需要的小伙伴可以參考下面文章內(nèi)容2022-06-06