4

新しい画像間を無期限にスムーズにフェードするために、レガシーdivの背景画像（つまり、すでに背景画像があり、制御できないため、最初に上書きする必要があります）を取得しようとしています。これが私がこれまでに持っているものです：

var images = [
 "/images/home/19041085158.jpg",
 "/images/home/19041085513.jpg",
 "/images/home/19041085612.jpg"
 ];

var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
 counter++;
 if (counter == images.length) {
     counter = 0;
 }
}, 2000);

問題は、スムーズではないことです（私はinnerfadeプラグインのようなものを目指しています）。

編集：質問は元々「不定ではありません（配列を1回だけ実行します）」と言っていましたが、マリオは私の愚かな命名エラーを修正しました。

EDIT2：私は現在Reigelの答え（以下を参照）を使用しています。これは完全に機能しますが、それでも画像間をスムーズにフェードする方法を見つけることができません。

すべてが大いに感謝するのに役立ちます:)

4

6 に答える 6

2

backgroundImageを設定する前に画像をプリロードし、置き換えます

if (counter == colours.length) {

と

if (counter == images.length) {

編集： 画像間のフェード（背景画像については話していないことに注意してください）は、2つの画像を使用し、一方が非表示になり、もう一方が非表示になるまで不透明度を変更することによって行われます。これは、2つの画像を同時に表示する必要があることを意味します。背景画像を1つだけ使用する場合、これは不可能です。

既存のdivの背景画像を削除してみてください

$(".home_banner").css({'backgroundImage':''});

img要素をその後ろに配置し（低いz-indexを使用）、これらをフェードインおよびフェードアウトします。これらにinnerfadeプラグインを使用して、フェードとループを処理させることもできます。

于 2010-04-20T06:18:46.040 に答える
1

多くの実験の後、私は自分の質問に否定的に答えることを余儀なくされました-つまり、この時点で私はそれができないと99％確信しています。

背景をフェードしようとしているdivに他のhtmlコンテンツが含まれているという点で、私の状況は理想的ではありません。そうでない場合は、ReigelのコードとMarioの最後の提案の組み合わせが確実に機能します。つまり、次のようになります。

  • Reigelのコードの後、
  • レガシーdivの背景を削除します。
  • zインデックスが低い新しいdivを挿入します。
  • この新しいdivの前景に画像を追加します。
  • 選択したライブラリを使用して移行します。

jQueryを使用して従来のdivの背景を削除してから、画像をdivの「前景」に挿入する方が簡単です。

とにかく、他の誰かが同じことをしようとしている場合に備えて、これを残しておいてください。さらに、私は未回答の質問が嫌いです:)

于 2010-04-22T06:12:46.790 に答える
1

これを試して...

var images = [
    "/images/home/19041085158.jpg",
    "/images/home/19041085513.jpg",
    "/images/home/19041085612.jpg"
    ];

var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
    $('<img>').attr('src',images[++counter]); // preload the next image
    if (counter == images.length) {
        counter = 0;
    }
}, 2000);
于 2010-04-20T06:27:03.480 に答える
1 
var bgrotate = function(imgpool, tg){
    var imgs        = imgpool,
        loader      = new Image(),
        domelements = new Array(),
        current     = 0,
        target      = tg;

    return {
        preload: function(){
           for(var i=0; i<imgs.length; i++){
               loader = new Image();

               loader.src = 'url("' + imgs[i] + '")';
               alert(loader);
               domelements.push(loader);                   
           }
        },
        rotate: function(speed){
           tg.delay(speed).show(1, function(){
              tg.css('backgroundImage', domelements[current].src);
              current = (current < domelement.lenght ? current++ : 0);
           }
        },
        stop: function(){
              tg.stop(true, false);
        }
    }
}



      $(document).ready(function(){
           var myobj = new bgrotate(['http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif', 'http://sstatic.net/so/img/logo.png'], $('#mydiv'));

           myobj.preload();
           myobj.rotate();
      }

myobj.stop()ループを終了します。テストされていませんが、これに似たものが機能するはずです。

于 2010-04-20T07:24:26.870 に答える
1

最初に画像をロードしてから切り替える必要があります

jQuery は新しい画像にフェードします: jQuery は新しい画像にフェードします

于 2010-04-20T06:17:31.007 に答える
0

-webkit-transition:1s;背景を変更するクラスの CSSに a を入れるだけです。

それは私にとってはうまくいきました。

于 2012-11-09T22:47:53.147 に答える