Question

我最近问过如何在一个元素上旋转图像，并且提供了这段代码 - 它完美地运行了：

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

Answer 1

我建议您使用随机起始图像来表示每次页面加载/刷新时的更改错觉。否则，您只需编写上次查看过的图像的cookie并在页面加载时显示下一个：

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

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

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

Answer 2

这只是一个黑暗的镜头

<body onload="rotateImage();">

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

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

3 个答案: