如何更改此代码以使图像在刷新时旋转？答案

【问题标题】：How do I changes this code to make images rotate on refresh?如何更改此代码以使图像在刷新时旋转？
【发布时间】：2010-01-25 00:13:55
【问题描述】：

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

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 的新手，所以如果有人提供解决方案，请解释它是如何工作的，以便我可以学习并希望以后少问问题......非常感谢

【问题讨论】：

标签： jquery refresh image-rotation

【解决方案1】：

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

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

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

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

【讨论】：

或者正如查理·埃普斯所说的那样......“没有真正的随机数”...... jk
@rockinthesixstring 哈哈...我应该给出使用 JSONP 从放射性衰变随机数服务中提取随机数的代码 :)
哈哈哈是的，我认为这很合适，因为我将在一个名为 IAMANATOM 的网站上使用该脚本！！！
@JamieD 这个解决方案使用您现有的脚本，每次它只是从不同的图像开始。所有后续轮换都不是随机的，而是根据您现有的脚本顺序进行的。

【解决方案2】：

这只是在黑暗中拍摄

<body onload="rotateImage();">

【讨论】：

谢谢老兄，我会拍下来试试看。

【解决方案3】：

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

<?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">

【讨论】：

感谢大家提出的随机化建议肯定很有用，但是由于美妙的淡入淡出，我想坚持使用我的脚本。