0

我想测试横幅(两个 css 背景图像)并在每个页面重新加载时随机旋转它们。是否可以在不使用任何插件的情况下实现类似的功能?

我只需要旋转两个图像,这基本上只是在每次 reload时在横幅元素上随机交换 css 类

非常感谢。

4

4 回答 4

2

确定的事!像这样的脚本应该可以工作:

$(document).ready(function() {
 var ad_urls= ['image1.png', 'image2.jpg'];
 var i= Math.floor(Math.random()*ad_urls.length) - 1;
 $('#image_to_update').attr('src', ad_urls[i]);
});

然后,当您想要一个新广告时,您只需更新 ad_urls 数组。

于 2009-12-07T08:11:12.560 回答
2

由于您特别要求分配 CSS 类,因此有一个 jquery 函数可以执行此操作:

$(function() {
   var id = Math.floor(Math.random() * 10);
   $("#banner").addClass("className" + id);
}

还有一些与此相关的功能,您可以在此处找到它们的文档:http: //docs.jquery.com/Attributes

于 2009-12-07T09:16:40.370 回答
1

如果您想在每个页面重新加载时交换图像,那么您可能需要使用服务器端脚本而不是 javascript 来执行此操作。另一种选择是在 DOM 准备好时应用随机 css:

$(function() {
    // Get a random number between 1
    var id = 1 + Math.floor(Math.random() * 11);
    $('banner').css('background-image', 'url(/images/image' + id + '.jpg)');
});
于 2009-12-07T08:05:35.460 回答
1

使用Math.random()您可以生成一个介于 0 和 N 之间的数字(N 是可用横幅的数量),然后显示 banner_i ( 0 <= i <=N )。

要生成数字,您可以执行以下操作:

var N = 10; /* This is the maximum myBannerNumber can get */
var myBannerNumber = Math.floor(Math.random()*N);
于 2009-12-07T08:06:44.150 回答