javascript - 通过jQuery的图像无限循环

Question

我正在为客户创建一个小广告模块。他们需要一个容器来每 30 秒显示一个不同的图像/链接。容器 (div) 将自动将所有广告加载到其中，然后该函数应处理其余部分。

我的想法如下：

1. 将选择器传递给下面的自定义函数
2. 隐藏选择器中的所有图像
3. 将一个名为“current_link”的类添加到第一个图像，然后将其淡入
4. 在图像数组（称为“链接”的变量）上运行一个循环，并使用延迟和队列 jQuery 函数将图像排队并延迟显示。
5. queue 函数将移除活动广告的 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();

Answer 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>

Answer 2

我看不到您当前的功能如何在图像之间更改无限队列。您只需为每个链接独立设置一个 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
          });
    }
}