2

クライアント向けの小さな広告モジュールを作成しています。30 秒ごとに異なる画像/リンクを表示するコンテナが必要です。コンテナ (div) にはすべての広告が自動的に読み込まれ、残りは関数が処理します。

私の考えは次のとおりです。

  1. 以下のカスタム関数にセレクターを渡します
  2. セレクター内のすべての画像を非表示にします
  3. 「current_link」というクラスを最初の画像に追加し、フェードインします
  4. 画像配列 (「リンク」と呼ばれる変数) でループを実行し、遅延およびキュー jQuery 関数を使用して、画像を遅延してキューに入れ、互いの後に表示します。
  5. キュー関数は、アクティブな広告の current_link を削除してフェードアウトし、クラスを次の画像に追加してフェードインします。

言うまでもなく、それほどうまく機能していません:D この段階では、機能がほとんどないため、無限にループすることはありません (広告はループして停止しないはずです)。

コードを改善する方法についてのアドバイス (私は専門家ではありません) をいただければ幸いです。前もって感謝します！

JSFiddle をチェックアウトする

HTML:

 <div class="advert_list">
      <a href="" target="_Blank"><img src="someimage1.png" /></a>
      <a href="" target="_Blank"><img src="someimage2.png" /></a>
 </div> <!-- e/o -->

jQuery:

 // Advertisement loader
    $.fn.image_fader = function(user_options) {

        // Image container
        var container = this;
        
        // All links:
        var links = $(container).find("a");

        // Default options:
        var default_options = {
            path: "",
            duration: 30000
        };

        // Create combined options:
        var options = $.extend(default_options, user_options);

        // Hide all images:
        $(links).hide();
        
        // Show first image:
        $(links).first().addClass("current_link").fadeIn();

        // Run the loop on the images:
        $(links).each(function() {
            
            // current link:
            var current_loop_link = this;
            
            $(current_loop_link).delay(options.duration).queue(function(next) {
                
                // Fade out any of the previous links:
                $(".current_link").fadeOut();
                
                // Add class to next link:
                $(current_loop_link).addClass("current_link");
                
                // Fade in the next link:
                $(current_loop_link).fadeIn();
                
                next();
            });
        });
    }

 // Call to above function:
 $(".advert_list").image_fader();
4

2 に答える 2

1

現在の関数が画像間で変化する無限のキューをどのように処理するかわかりません。リンクごとに 2 項目 (遅延、コールバック、フェードアウト) のキューを個別に設定するだけです。

代わりに、繰り返し呼び出される専用の関数を使用します。

$.fn.image_fader = function(user_options) {
    var links = $(this).find("a"),
        default_options = {
            path: "",
            duration: 30000
        },
        // Create combined options:
        options = $.extend(default_options, user_options);

    links.hide();

    // Show first image:
    show(links.first());

    function show(link) {
        link.addClass("current_link")
          .fadeIn()
          .delay(options.duration)
          .queue(function(next) {
             link.fadeOut().removeClass("current_link");
             // determine next one and move on:
             show(links.eq( (links.index(link)+1) % links.length ));
             next(); // dequeue
          });
    }
}
于 2013-08-13T12:54:34.503 に答える
1

これを試して

http://jsfiddle.net/s7GzJ/1/

<script>

// define plugin
(function($){ 
    // Advertisement loader
    $.fn.image_fader = function(user_options) {

        // Image container
        var container = $(this);

        // All links:
        var links = container.find("a");
        var linkI = -1;

        // Default options:
        var default_options = {
            path: "",
            duration: 2000
        };

        // Create combined options:
        var options = $.extend(default_options, user_options);

        //show next
        var show = function(){
            linkI ++;
            if( linkI >= links.size()) linkI = 0;

            links.eq(linkI).fadeIn(500, delay);
        };

        // dummy animation for delaying current one
        var delay = function(){
            links.eq(linkI).animate({opacity:100}, options.duration , hide).addClass("current_link");

        };

        // hide current
        var hide = function(){
            links.eq(linkI).hide(500, function(){
                $(this).removeClass("current_link");
                show();
            });
        };

        // Hide all images:
        $(links).hide();

        // start show first
        show();

    }
})(jQuery);  

//call plugin
jQuery(document).ready(function(){
    // Call to above function:
    $(".advert_list").image_fader();
}); 

</script>
于 2013-08-13T12:54:19.790 に答える