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>
相關文章
easywasmplayer實現(xiàn)視頻流播放示例詳解
這篇文章主要為大家介紹了easywasmplayer實現(xiàn)視頻流播放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09在網(wǎng)頁里看flash的trace數(shù)據(jù)的js類
我的js類jdhcn.js中的一個flashDebug方法2009-01-01JS獲取字符串型數(shù)組下標的數(shù)組長度的代碼
JS獲取字符串型數(shù)組下標的數(shù)組長度的代碼,需要的朋友可以參考下2013-03-03vant uploader實現(xiàn)上傳圖片拖拽功能(設為封面)
這篇文章主要介紹了vant uploader實現(xiàn)上傳圖片拖拽功能(設為封面),這個功能在日常生活中經(jīng)常會用到,操作非常方便,今天通過實例代碼介紹實現(xiàn)過程,需要的朋友可以參考下2021-10-10JavaScript對象封裝的簡單實現(xiàn)方法(3種方法)
這篇文章主要介紹了JavaScript對象封裝的簡單實現(xiàn)方法,結(jié)合實例形式分析了3種簡單實現(xiàn)方法與相關注意事項,需要的朋友可以參考下2017-01-01javascript隨機抽取0-100之間不重復的10個數(shù)
這篇文章主要為大家詳細介紹了javascript隨機抽取0-100之間不重復的10個數(shù),分享了兩種簡單辦法,感興趣的小伙伴們可以參考一下2016-02-02解決AJAX中跨域訪問出現(xiàn)''沒有權限''的錯誤
很多人在使用AJAX調(diào)用別人站點內(nèi)容的時候,JS會提示"沒有權限"錯誤,這是XMLHTTP組件的限制-安全起見2008-08-08