4

私はここでさまざまな投稿をしばらく見て回っていますが、jAndyからお見せしようとしているこの投稿を除いて、まだ本当に役に立ったものはありません。

基本的に、divのバックグラウンドにスライドショーを配置できるようにしたいと思います。

これまでのところ、次のコードがありますが、ご覧のとおり、フェードイン、画像の表示、フェードアウトから白への切り替え、フェードインして新しい画像を表示します。一方がフェードアウトしてもう一方がフェードインするのではなく、フェードを一緒にブレンドしたいです。これはかなりオープンエンドであることを知っていますが、誰かが私を正しい方向に向けることができますか？

 var images = [
       '/slideshow1.jpg',
       '/slideshow2.jpg',
       '/slideshow3.jpg'

   ];
   loop = 0;
   $home = $('#slideme');

   (function fader(){

            $home.fadeOut(1300, function(){
            $home.css('background', 'url(' + images[loop] + ') top center no-repeat');
            $home.fadeIn(1300, function(){
                 setTimeout(fader, 9000);
            });
        });

        if(loop < images.length -1) 
           loop++;
        else loop = 0;                
    })();

助けてくれて本当にありがとう！

4

1 に答える 1

2

jsBinデモ

要素が1つのBG画像のみをサポートするため、2つの背景画像を同時にXフェードすることはできません。少なくとも背景画像が重ならないようにします。（間違っている場合は訂正してください）
代わりに、URLを読み取り、実際の画像を作成して、目的の要素に追加することができます。

var images = [
   '/slideshow1.jpg',
   '/slideshow2.jpg',
   '/slideshow3.jpg'
]; 

var imagesN = images.length;
var $slideme = $('#slideme');

for(i=0;i<imagesN;i++){
  $('<img>',{ src : images[i] }).appendTo( $slideme );
}

//これで画像が追加されました。画像をCSSすることを忘れないでください：position:absolute;重ねて取得します。

私のjQueryプラグインを使用して、画像をフェードループすることができます。プラグインを使用すると、ホバーで一時停止したり、画像をクリックして続行したりできます。

/* FadeMe 'FPS'
// jQuery plugin
// Author: Roko C. Buljan (2012)
// www.roxon.in */
(function($){
    $.fn.fademe = function(F,P,S){
        F=F||700;  //  Fade time (default)
        P=P||3000; //  Pause time (default)
        S=S-1||0;  //  Start from 1st image (default)
        var e=this.children(),T;
        function a(){ e.eq(S=++S%e.length).fadeTo(F,1).siblings(e).stop(1).fadeTo(F,0); }
        e.on('mouseenter mouseleave click',function(e){
            var m=e.type==='mouseenter'?clearTimeout(T):(e.type==='click'?a():aa());    
        }).eq(S).show().siblings(e).hide();
        function aa(){T=setTimeout(function(){a();aa();},F+P);}aa();
    };
})(jQuery);


$slideme.fademe(); // initiate plugin on your element

「FPS」のように「Frame-Per-Second」を覚えておくことで、プラグインのデフォルトを簡単に変更/オーバーライドできます。

$slideme.fademe(1300, 9000, 1);

その結果、1300msのフェードが発生します。9000一時停止; 「最初の」画像から開始します（デフォルト）。いくつかのデフォルトをスキップしてプロパティに到達するには、次のようにします。

$slideme.fademe(0, 0, 2);

これは次のように変換されます：デフォルトのフェード（700）; デフォルトの一時停止（3000）; しかし、2番目の画像から始めます。

背景画像を使用したい場合は、次のように編集してください。

jsBinデモ2

于 2012-09-22T02:28:22.577 に答える