js實現(xiàn)圖片輪換效果代碼
更新時間：2013年04月16日 15:16:32 作者：
本教程使用js實現(xiàn)兩張圖片切換/多張圖片輪換/結(jié)束執(zhí)行等效果，感興趣的朋友可以參考下哈，希望對你學習js有所幫助
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var numb = 0;
var imgnumb = 1;
function showimg() {
//兩張圖片切換方法1 /*numb++;
if (numb % 2 == 0) {
document.getElementById('img1').setAttribute('src', 'images/1.jpg');
}
else {
document.getElementById('img1').setAttribute('src', 'images/2.jpg');
}*/
//兩張圖片切換方法2 /*if (numb == 0) {
document.getElementById('img1').setAttribute('src', 'images/2.jpg');
numb = 1;
}
else {
document.getElementById('img1').setAttribute('src', 'images/1.jpg');
numb = 0;
}*/
}
/圖片輪換/多張 function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
if (imgnumb == 9) {
imgnumb = 0;
}
}
var clearid;
function clearfun() {
clearInterval(clearid);
}
clearid=setInterval(imgfor, 1000);
</script>
</head>
<body>
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
<input type="button" value="兩張圖片切換" onclick="showimg();" />
<br />
<input type="button" value="多張圖片輪換" onclick="imgfor();;" />
<br />
<input type="button" value="結(jié)束執(zhí)行" onclick="clearfun();" />
</body>
</html>
相關(guān)文章
這篇文章主要介紹了引入(調(diào)用)一個JS文的方法，非常不錯介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-05-05
做一個功能需要彈窗，因為get方式對url的長度有限制,所以必須用post，本文有兩個不錯的方法，大家可以參考下2014-01-01
JS中檢測數(shù)據(jù)類型的幾種方式及優(yōu)缺點小結(jié)
這篇文章主要介紹了JS中檢測數(shù)據(jù)類型的幾種方式及優(yōu)缺點小結(jié),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS截取字符串的方法,結(jié)合實例形式較為詳細的分析了JavaScript截取字符串的常用函數(shù)與具體使用技巧,并附帶說明了JS截取字符串substr和substring方法的區(qū)別,需要的朋友可以參考下2015-11-11
程序開發(fā)中，編程人員經(jīng)常要面對的是如何編寫代碼來響應錯誤事件的發(fā)生，即例外處理（exception handlers）。2008-06-06![javascript最短的拖動代碼[兼容FF]](http://img.jbzj.com/images/xgimg/bcimg5.png)
javascript最短的拖動代碼[兼容FF]...2007-10-10
下面小編就為大家?guī)硪黄獪\談JavaScript中變量和函數(shù)聲明的提升。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript實現(xiàn)精美個性導航欄筋斗云效果
這篇文章主要介紹了JavaScript實現(xiàn)精美個性導航欄筋斗云效果，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了JavaScript中瀏覽器多個標簽頁通信的8種方案與實戰(zhàn)場景深度對比,文中的示例代碼簡潔易懂,有需要的可以參考下2025-03-03
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊按鈕切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08