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