Rotation d'image de base avec jQuery

Question

Je voudrais tester la bannière (deux images d'arrière-plan css) et les faire pivoter au hasard à chaque rechargement de page. Est-il possible de réaliser quelque chose comme ça sans utiliser de plugins?

J'ai juste besoin de faire tourner deux images, ce qui est fondamentalement juste swapping classes au hasard sur css l'élément de bannière, sur chaque rechargent.

Merci beaucoup.

Answer 1

Depuis que vous avez demandé spécifiquement pour l'attribution d'une classe CSS, il y a une fonction jquery pour ce faire:

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

Il y a aussi quelques autres fonctions liées à cela, vous pouvez les trouver documentés ici: http://docs.jquery.com/Attributes

Answer 2

Si vous souhaitez échanger des images à chaque rechargement de page, vous devez probablement le faire en utilisant le script côté serveur au lieu de javascript. Une autre option consiste à appliquer une css aléatoire lorsque le DOM est prêt:

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

Answer 3

En utilisant Math.random() vous pouvez générer un nombre compris entre 0 et N (N étant le nombre de vos bannières disponibles) puis afficher banner_i (0 < = i < = N).

Pour générer le numéro, vous pouvez faire quelque chose comme ceci:

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

Answer 4

chose est sûre! Un script comme celui-ci devrait fonctionner:

$(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]); 
}); 

Ensuite, lorsque vous voulez une nouvelle annonce, vous pouvez simplement mettre à jour le tableau ad_urls.