Как создать баннер Javascript для переключения изображений в разное время?

Question

У меня есть баннер с 10 картинками. Я знаю, как установить время ожидания, чтобы изображения переключались каждые определенное количество секунд, но как я могу установить таймер для изменения изображения в зависимости от того, как долго я хочу отображать отдельные изображения.

Например: Я хочу, чтобы изображение 1 отображалось в течение 10 секунд, изображение 2 отображалось в течение 3 секунд, а изображение 3 отображалось в течение 15 секунд.

Это мой код до сих пор: (который изменяет все изображения с равными интервалами в 5 секунд.

Javascript:

        window.onload = rotate;        
         var thisAd = 0;        
         var adImages = new Array("Images1/Picture10","Images1/Picture1","Images1  /Picture2","Images1/Picture3","Images1/Picture4","Images1/Picture5","Images1/Picture6","Images1/Picture7","Images1/Picture8","Images1/Picture9");

function rotate(){              
          thisAd++;
          if(thisAd == adImages.lengh){
            thisAd = 0;
          }     
          document.getElementById("adBanner").src = adImages[thisAd];       
          setTimeout(rotate, 5 * 1000);
}

Answer 1

Вы можете хранить свои изображения в объектах с двумя свойствами: одно для URL, другое для задержки, а затем использовать это.

var adImages = [
    {
        url:"img1.png",
        delay: 5
    },
    {
        url:"img2.png",
        delay: 3
    }
];

Затем вы можете использовать эти свойства:

var image = adImages[thisAd];
document.getElementById("adBanner").src = image.url;
setTimeout(rotate, image.delay * 1000);

Answer 2

Создайте массив времен, соответствующий вашим изображениям.:

var adTimes = new Array(1000,5000,2000.....)

Используйте значение в таймере

setTimeout(rotate, 5 * adTimes[thisAd]);

Answer 3

Поскольку у вашего времени нет логики, общий алгоритм не может быть создан. Таким образом, вы должны сделать переключатель / иначе, если для каждого объявления.
Вам также придется сбросить счетчик thisAd после одного цикла.

var time;
if(thisAd>9)thisAd=0;
if(thisAd==0)time=10;
else if(thisAd==1)time=3;
else if(thisAd==2)time=15;
...
setTimeout(rotate, time * 1000);