javascript - 通过 jQuery 无限循环图像

Question

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

我的想法如下:

1. 将选择器传递给下面的自定义函数
2. 隐藏选择器内的所有图像
3. 向第一个图像添加一个名为“current_link”的类，然后将其淡入
4. 在图像数组(称为“links”的变量)上运行循环，并使用延迟和队列 jQuery 函数对图像进行排队，并延迟显示。
5. 队列函数将删除事件广告的 current_link，将其淡出，将类添加到下一张图像并将其淡入。

不用说，它的工作效果不太好:D 在这个阶段，它所做的功能很少，它不会无限循环(广告应该循环而不是停止)。

任何有关如何改进代码的建议(我远非专家)将不胜感激!预先感谢您!

Checkout the 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

我不明白你当前的函数如何执行在图像之间变化的无休止的队列。您只需为每个链接独立设置一个 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
          });
    }
}