jquery - jQuery を使用した基本的な画像の回転

Question

バナー (2 つの CSS 背景画像) をテストし、ページをリロードするたびにランダムに回転させたいと思います。プラグインを使わずにそのようなことを達成することは可能ですか?

2 つの画像を回転させるだけで済みます。これは基本的に、各 reloadで、バナー要素で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

ページをリロードするたびに画像を入れ替えたい場合は、おそらく JavaScript ではなくサーバー側スクリプトを使用してこれを行う必要があります。もう 1 つのオプションは、DOM の準備が整ったときにランダムな CSS を適用することです。

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

を使用Math.random()すると、0 から N (N は使用可能なバナーの数) の数値を生成してから、banner_i ( 0 <= i <=N ) を表示できます。

番号を生成するには、次のようにします。

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