jquery - このコードを変更して、更新時に画像を回転させるにはどうすればよいですか?

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に慣れていないので、誰かが解決策を提供する場合は、それがどのように機能するかを説明してください。そうすれば、後で質問を減らすことができます... どうもありがとう

score 1 · Accepted Answer

ランダムな開始画像を使用して、ページの読み込み/更新ごとに変化の錯覚を与えることをお勧めします. そうしないと、最後に表示された画像の Cookie を作成し、ページの読み込み時に次の画像を表示することになります。

最初の 2 行を次のように変更します (意図的に順序を逆にしていることに注意してください)。

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

もちろん、同じ画像がランダムに連続して表示される可能性はありますが、それはおそらくあなたが望むものに非常に近いでしょう.

score 0 · Accepted Answer

これは、あなたが望むものに適応できる概念を説明するための簡単なアプローチです. これをページのヘッダーに入れます。

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

score 0 · Accepted Answer

0

これは暗闇の中でのショットです

<body onload="rotateImage();">

于 2010-01-25T00:16:11.653 に答える

jquery - このコードを変更して、更新時に画像を回転させるにはどうすればよいですか?

3 に答える 3

Related

Reference