Question

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

我的想法如下：

将选择器传递给下面的自定义功能
隐藏选择器中的所有图像
在第一个图像中添加一个名为“current_link”的类，然后在
在images数组（名为“links”的变量）上运行一个循环，并使用延迟和队列jQuery函数对图像进行排队，并延迟显示在彼此之后。
队列功能会移除有效广告的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

试试这个

<强> 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
          });
    }
}

通过jQuery图像无限循环

Checkout the JSFiddle

2 个答案: