Основной поворот изображения с помощью jQuery

Question

Я хотел бы проверить баннер (два фоновых изображения CSS) и повернуть их случайным образом при каждой перезагрузке страницы. Можно ли добиться чего-то подобного без использования каких-либо плагинов?

Мне просто нужно повернуть два изображения, что в основном означает случайное переключение классов CSS на элементе баннера, при каждой перезагрузке .

Большое спасибо.

Answer 1

Поскольку вы специально просили назначить класс CSS, для этого есть функция jquery:

$(function() {
   var id = Math.floor(Math.random() * 10);
   $("#banner").addClass("className" + id);
}

Есть также еще несколько функций, связанных с этим, их можно найти здесь: http://docs.jquery.com/Attributes

Answer 2

Конечно! Такой скрипт должен работать:

$(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.

Answer 3

Используя Math.random(), вы можете сгенерировать число от 0 до N (N - количество доступных баннеров), а затем отобразить banner_i (0 <= i <= N). </p>

Чтобы сгенерировать число, вы можете сделать что-то вроде этого:

var N = 10; /* This is the maximum myBannerNumber can get */
var myBannerNumber = Math.floor(Math.random()*N);

Answer 4

Если вы хотите поменять изображения при каждой перезагрузке страницы, то вам, вероятно, нужно сделать это, используя сценарий на стороне сервера вместо javascript. Другой вариант - применить случайный CSS, когда DOM готов:

$(function() {
    // Get a random number between 1
    var id = 1 + Math.floor(Math.random() * 11);
    $('banner').css('background-image', 'url(/images/image' + id + '.jpg)');
});