Как я могу изменить этот код, чтобы заставить изображения вращаться при обновлении? - PullRequest
Новая
       10

Как я могу изменить этот код, чтобы заставить изображения вращаться при обновлении?

1 голос
/ 25 января 2010

Я недавно спросил, как вращать изображения на элементе, и мне подарили этот код - который отлично работал: 

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 в целом, поэтому, если кто-то предоставляет решение, пожалуйста, объясните, как оно работает, чтобы я мог учиться и, надеюсь, задать меньше вопросов позже ... Большое спасибо

Ответы [ 3 ]

1 голос
/ 25 января 2010

Я бы порекомендовал вам использовать случайное начальное изображение, чтобы создать иллюзию изменений при каждой загрузке / обновлении страницы. В противном случае вам остается написать cookie-файл с последним просмотренным изображением и показать следующий при загрузке страницы:

Измените первые две строки следующим образом (обратите внимание, что я специально изменил их порядок): 

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

Конечно, есть вероятность того, что одно и то же изображение случайно появится снова подряд, но, вероятно, оно будет очень близко к тому, что вы хотите.

0 голосов
/ 25 января 2010

Вот простой подход для иллюстрации концепции, которая может быть адаптирована к тому, что вы хотите. Поместите это в заголовок страницы: 

<?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">
0 голосов
/ 25 января 2010

это просто выстрел в темноте 

<body onload="rotateImage();">
...