js實現(xiàn)圖片輪換效果代碼
更新時間：2013年04月16日 15:16:32 作者：
本教程使用js實現(xiàn)兩張圖片切換/多張圖片輪換/結束執(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="結束執(zhí)行" onclick="clearfun();" />
</body>
</html>
相關文章
easywasmplayer實現(xiàn)視頻流播放示例詳解
這篇文章主要為大家介紹了easywasmplayer實現(xiàn)視頻流播放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
Lombok的出現(xiàn)幫助開發(fā)人員在開發(fā)工程中消除了大部分冗余代碼:繁瑣的get、set方法甚至建造者模式，今天通過本文給大家分享Lombok實現(xiàn)方式JSR-269的相關知識，感興趣的朋友一起看看吧2021-06-06
js的屬性名可以使用變量，例如js對象object,當賦給該對象屬性的時候可以采用以下方式，比較實用，需要的朋友可以看看2014-10-10
在網頁里看flash的trace數(shù)據(jù)的js類
我的js類jdhcn.js中的一個flashDebug方法2009-01-01
這篇文章主要介紹了深入淺析JSONAPI在PHP中的應用,需要的朋友可以參考下2017-12-12
JS獲取字符串型數(shù)組下標的數(shù)組長度的代碼
JS獲取字符串型數(shù)組下標的數(shù)組長度的代碼，需要的朋友可以參考下2013-03-03
vant uploader實現(xiàn)上傳圖片拖拽功能(設為封面)
這篇文章主要介紹了vant uploader實現(xiàn)上傳圖片拖拽功能(設為封面),這個功能在日常生活中經常會用到，操作非常方便，今天通過實例代碼介紹實現(xiàn)過程，需要的朋友可以參考下2021-10-10
JavaScript對象封裝的簡單實現(xiàn)方法(3種方法)
這篇文章主要介紹了JavaScript對象封裝的簡單實現(xiàn)方法,結合實例形式分析了3種簡單實現(xiàn)方法與相關注意事項,需要的朋友可以參考下2017-01-01
javascript隨機抽取0-100之間不重復的10個數(shù)
這篇文章主要為大家詳細介紹了javascript隨機抽取0-100之間不重復的10個數(shù)，分享了兩種簡單辦法，感興趣的小伙伴們可以參考一下2016-02-02
解決AJAX中跨域訪問出現(xiàn)''沒有權限''的錯誤
很多人在使用AJAX調用別人站點內容的時候,JS會提示"沒有權限"錯誤，這是XMLHTTP組件的限制-安全起見2008-08-08