在每個使用JavaScript的5秒內更改5張圖片

我是JavaScript新手，我不知道如何在5個不同的gif圖像之間進行更改。作業如下：在每個使用JavaScript的5秒內更改5張圖片

您的第11章的項目文件夾包含五個音樂會系列的廣告圖片，concert1.gif到concert5.gif。創建一個循環遍歷圖像的腳本，並顯示每一個腳本五秒鐘。將文檔另存爲ConcertAds.html。

這裏是我到目前爲止的代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Concert Ads</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
/* <![CDATA[ */ 
var concertads = new Array(5); 
    concertads[0] = new Image(); 
    concertads[1] = new Image(); 
    concertads[2] = new Image(); 
    concertads[3] = new Image(); 
    concertads[4] = new Image(); 

    concertads[0].src = "concert1.gif"; 
    concertads[1].src = "concert2.gif"; 
    concertads[2].src = "concert3.gif"; 
    concertads[3].src = "concert4.gif"; 
    concertads[4].src = "concert5.gif"; 
var completeAds; 
var currImgIndex = 0; 
var maxImgIndex = concertads.length-1; 
function concertAd() { 
    if (completeAds) { 
     completeAds.src = concertads[0].src; 
     ++currImgIndex; 
    if (currImgIndex > maxImgIndex) { 
     currImgIndex = 0; 
    } 
} 
} 
function initImgCycle(adsID) { 
    completeAds = document.getElementByID(adsID) 
    if (completeAds) { 
     setInterval("cycle()", 5000); 
     } 
    } 
/* ]]> */ 
</script> 
</head> 
<body onload="initImgCycle('adBanner');"> 
<img src="concert1.gif" id="adBanner" alt="Concert Ads" /> 
</body> 
</html>

我想感謝所有幫助，我真的很困惑。感謝您的時間！

來源

2012-06-28 Florecita Rockera

這是一個家庭作業或面試任務？ –

聽起來像功課。爲什麼你還需要創建一個gif動畫師，當gifs已經可以動畫了？ –

目前還不清楚您是否希望他們每個人同時顯示5秒鐘，或者讓他們一個接一個顯示5秒鐘。我去了第一個。

(function() { 

    var images = [ 
    new Image(), new Image(), new Image(), new Image(), new Image() 
    ]; 

    images[0].src = 'http://bit.ly/sbK2Ub'; 
    images[1].src = 'http://bit.ly/lMMo0n'; 
    images[2].src = 'http://bit.ly/LFtGyc'; 
    images[3].src = 'http://bit.ly/MY3skL'; 
    images[4].src = 'http://bit.ly/M8iQk3'; 

    function show(elem) { 
    document.body.appendChild(elem); 
    } 
    function remove(elem) { 
    document.body.removeChild(elem); 
    } 

    window.onload = function() { 
    images.forEach(function(a, b) { 
     show(images[b]); 
    }); 

    window.setTimeout(function() { 
     images.forEach(function(a, b) { 
     remove(images[b]); 
     }); 
    }, 5000); 

    }; 

})();

下面是使用不同的圖像（點擊 '渲染' 運行的代碼）演示：http://jsbin.com/akoqek/2/edit

來源

2012-06-28 13:07:11 0x499602D2

imgCounter=0; 

function cycle(){ 
    if(imgCounter<5){ 
    imgCounter++; 
    document.getElementById("imgX").src="concert" + imgCounter + ".gif";  
    setTimeout("cycle();", 5000); 
    } 
} 
cycle();

一定要有一個

<img id="imgX" src="" alt="img"/>

或類似的東西html

來源

2012-06-28 13:20:47 Steen

所以它會是這樣的：

`<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
    </style> 
    <title>Goselin Greeting cards</title> 
<script type="text/javascript"> 
/* <![CDATA[ */ 
imgCounter=0; 
    function cycle(){ 
      if(imgCounter<5){ 
      imgCounter++; 
     document.getElementById("imgX").src="concert" + imgCounter + ".gif";  
      setTimeout("cycle();", 5000); 
    } 
} 

/* ]]> */ 
</script> 
</head> 
<body onload="initImgCycle('adBanner');"> 
<h1>Consert Series</h1> 
<img id="imgX" src="" alt="img"/> 
</body> 
</html>

我想弄清楚同樣的事情。

來源

2012-10-28 19:20:17

在每個使用JavaScript的5秒內更改5張圖片

回答

相關問題