Изменение 5 изображений за 5 секунд с использованием JavaScript

Я новичок в JavaScript, и я не понимаю, как я должен переключаться между 5 различными изображениями gif. Назначение:Изменение 5 изображений за 5 секунд с использованием JavaScript

Папка «Проекты» для главы 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-аниматор, когда gif уже можно анимировать? –

Непонятно, должны ли вы, чтобы каждый из них показывался одновременно в течение 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

Изменение 5 изображений за 5 секунд с использованием JavaScript

ответ

Смежные вопросы