我想测试横幅(两个 css 背景图像)并在每个页面重新加载时随机旋转它们。是否可以在不使用任何插件的情况下实现类似的功能?
我只需要旋转两个图像,这基本上只是在每次 reload时在横幅元素上随机交换 css 类。
非常感谢。
确定的事!像这样的脚本应该可以工作:
$(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 数组。
由于您特别要求分配 CSS 类,因此有一个 jquery 函数可以执行此操作:
$(function() {
var id = Math.floor(Math.random() * 10);
$("#banner").addClass("className" + id);
}
还有一些与此相关的功能,您可以在此处找到它们的文档:http: //docs.jquery.com/Attributes
如果您想在每个页面重新加载时交换图像,那么您可能需要使用服务器端脚本而不是 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)');
});
使用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);