如何创建 Javascript 横幅在不同时间切换图片？答案

【问题标题】：How do I create a Javascript banner switches pictures at different times?如何创建 Javascript 横幅在不同时间切换图片？
【发布时间】：2012-01-24 19:35:19
【问题描述】：

我有一个横幅，里面有 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);
}

【问题讨论】：

标签： javascript html ads banner banner-ads

【解决方案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);

【讨论】：

【解决方案2】：

制作一个时间数组以匹配您的图像。：

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

使用计时器中的值

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

【讨论】：

【解决方案3】：

由于您的计时没有逻辑，因此无法创建通用算法。所以你必须为每个广告做一个 switch / else if。
您还必须在一个周期后重置计数器 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);

【讨论】：