通过jQuery实现图像无限循环

Image infinite loop via jQuery

本文关键字：无限循环 图像 实现 jQuery 通过      更新时间：2023-09-26

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

我的想法如下：

  1. 将选择器传递到下面的自定义函数
  2. 隐藏选择器中的所有图像
  3. 添加一个名为"的类；current_link"；到第一张图像，然后将其淡入
  4. 在图像数组（称为"links"的变量）上运行一个循环，并使用延迟和队列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();

我看不出您当前的函数是如何处理图像之间不断变化的无尽队列的。您只为每个链接单独设置了一个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
          });
    }
}

尝试这个

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>
相关文章：