使用 jQuery 进行基本图像旋转

Question

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

我只需要旋转两个图像，这基本上只是在每次重新加载时在横幅元素上随机交换CSS类。

非常感谢。

Answer 1

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

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

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

Answer 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 数组即可。

Answer 3

如果您想在每次页面重新加载时交换图像，那么您可能需要使用服务器端脚本而不是 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)');
});

Answer 4

使用 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);