Question

我尝试复制像这样的横幅广告，但我需要它来循环播放三个GIF动画。

以下是我在此修改的示例代码：

// randomization
var index = Math.floor(Math.random() * 3);

var images = new Array("<div class='ad'><a href = 'https://www.poundstopocket.co.uk/buildapp' target='_blank'>
<img src='https://www.poundstopocket.co.uk/pound-place/wp-content/themes/shaken-grid-premium/images/1.gif' alt='Visit Computer Hope'></a></div>", 
"<div class='ad'><a href = 'https://www.poundstopocket.co.uk/straightforwardapp' target='_blank'><img src='https://www.poundstopocket.co.uk/pound-place/wp-content/themes/shaken-grid-premium/images/2.gif' alt='Computer History'></a></div>", 
"<div class='ad'><a href = 'https://www.poundstopocket.co.uk/nohiddenfeesapp' target='_blank'><img src='https://www.poundstopocket.co.uk/pound-place/wp-content/themes/shaken-grid-premium/images/3.gif' alt='Visit Computer Hope'></a></div>")
// loop
setInterval(function() {
    $('.ad').html(images[index])
    if(index == 2){ 
        index = 0; 
    }else{ 
        index++; 
    }
}, 5000);

包括大部分jscript和网站上的图片。

这个循环不能像我需要的那样用于我自己的目的我需要循环重置并重新开始在0,1或2，因为随机化的初始脚本我想保留该部分但是连续循环3 5或6秒GIF。

Answer 1

更简单的方法 - 首先随机化数组的顺序。

images.sort(function() { return Math.floor(Math.random() * 2); });

然后

var ad = $('.ad'), next = 0;
setInterval(function() {
    ad.html(images[next]);
    next = images[next+1] ? next+1 : 0;
}, 5000);

通过GIF循环

1 个答案: