1

我最近询问了如何在元素上旋转图像，并收到了这段代码 - 效果很好：

counter = 1; 
num_images = 9;
dir = "URL TO IMAGE DIRECTORY";

function rotateImage() {
    var background_img = 'url(' + dir + '/image' + counter + '.gif)';

    jQuery('#fader.category').fadeOut(function() {
        jQuery('#fader.category').css('background-image', background_img).fadeIn('slow');
    });     

    counter++; if (counter > num_images) counter = 1;           
}
setInterval( "rotateImage()", 25000 );

我现在的问题是：如何调整相同的代码以使图像在刷新页面时发生变化？我一般是 jQuery 和 Javascript 的新手，所以如果有人提供解决方案，请解释它是如何工作的，以便我可以学习并希望以后少问问题......非常感谢

4

3 回答 3

1

我建议您使用随机起始图像来在每个页面加载/刷新时产生变化的错觉。否则，您将需要编写最后查看图像的 cookie 并在页面加载时显示下一个：

将前两行更改如下（注意我故意颠倒它们的顺序）：

num_images = 9;
// Pick a random starting number
counter = Math.ceil(Math.random() * num_images);

当然，同样的图像也有可能连续再次随机出现，但它可能会非常接近你想要的。

于 2010-01-25T00:25:58.770 回答
0

这只是在黑暗中拍摄

<body onload="rotateImage();">
于 2010-01-25T00:16:11.653 回答
0

这是一个简单的方法来说明可以适应您想要的概念。把它放在页面的标题中：

<?php global $banner_id;  ?>
<?php   $banner_id=rand(0,N);  ?>
<style type="text/css">
  #header_image {
    background: #000000 url("/path_to_image_files/image_<?php echo($banner_id); ?>.jpg") top center no-repeat;
    }
</style>

这里 $banner_id=rand(0,N); 抓取一个从零到 N 的随机数。当然，您将文件路径插入到要随机化的图像，然后在这种情况下，应该是一个文件夹，其图像标记为“image_N.jpg”，其中 N 按预期随机化。此外，您还需要包含它来声明一个全局变量以便稍后检索它：

  <?php global $banner_id;  ?>

然后在你的页面正文中，只需在你想要随机图像的地方使用这个 div。

<div id="header_image">
于 2010-01-25T00:28:19.250 回答