需要将jquery从随机图像更改为序列

时间:2012-12-17 12:09:52

标签: jquery

所以它是预装图像

  var headerImages = [
       'images/logoa.png',
       'images/logob.png',
       'images/logoc.png',
       'images/logod.png',
       'images/logoe.png',
       'images/logog.png',
       'images/logoh.png',
       /* 'images/logoi.png', */
       'images/test/logoa.png',
       'images/test/logob.png'];

然后在每个页面滚动中选择一个随机的,如何按顺序进行,这意味着从预加载的顶部到底部?

....

jQuery.preLoadImages(headerImages);


jQuery(window).scroll(function() {
  jQuery('#sidebar').css('backgroundImage', 'url(' +
headerImages[Math.floor(Math.random()*headerImages.length)] + ')');
});

所以我猜这部分是Math.floor(Math.random()*headerImages.length),但我不知道该怎么做..

非常感谢你的帮助!

3 个答案:

答案 0 :(得分:1)

var x =0;
jQuery(window).scroll(function() {
  jQuery('#sidebar').css('backgroundImage', 'url(' +
headerImages[x] + ')');
x++
if (x == headerImages.length)
{
 x =0;
}
});

答案 1 :(得分:1)

headerImages似乎是一个数组,所以如果你做一个从0到headerImages.lenght的循环你应该没问题,并执行类似的操作:

jQuery('#sidebar').css('backgroundImage', 'url(' + headerImages[x] + ')');

在循环内部,x是变量,从0增加到最大

答案 2 :(得分:1)

您可以通过将当前图像索引存储在变量中并在每个滚动处添加来实现。然后在到达列表末尾时将其设置为零:

jQuery.preLoadImages(headerImages);

    var index = 0; // set the variable

    jQuery(window).scroll(function() {
    jQuery('#sidebar').css('backgroundImage', 'url(' + headerImages[index] + ')');

    index ++; // add one to point to the next image on the next scroll

    if(index==headerImages.length) index = 0; // If the counter is at the end of the array then set it to zero again

});