JQuery功能列表幻灯片延迟

所以这就是我想要做的。我在3个不同的列中滑动3格。我想延迟这个脚本，以便3列以相同的速度改变，但是它们在不同的时间改变。这里的javascriptJQuery功能列表幻灯片延迟

/* 
* FeatureList - simple and easy creation of an interactive "Featured Items" widget 
* Examples and documentation at: http://jqueryglobe.com/article/feature_list/ 
* Version: 1.0.0 (01/09/2009) 
* Copyright (c) 2009 jQueryGlobe 
* Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License 
* Requires: jQuery v1.3 
*/ 
(function($) { 
$.fn.featureList = function(options) { 
    var tabs = $(this); 
    var output = $(options.output); 

    new jQuery.featureList(tabs, output, options, speed); 
    return this;  
}; 

$.featureList = function(tabs, output, options, speed) { 
    function slide(nr) { 
     if (typeof nr == "undefined") { 
      nr = visible_item + 1; 
      nr = nr >= total_items ? 0 : nr; 
     } 

     tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current'); 

     output.stop(true, true).filter(":visible").fadeOut(); 
     output.filter(":eq(" + nr + ")").fadeIn(function() { 
      visible_item = nr; 
     }); 
    } 

    var options   = options || {}; 
    var total_items  = tabs.length; 
    var visible_item = options.start_item || 0; 

    options.pause_on_hover  = options.pause_on_hover  || true; 
    output.pause_on_hover  = output.pause_on_hover   || true; 
    options.transition_interval = options.transition_interval || speed; 

    output.hide().eq(visible_item).show(); 
    tabs.eq(visible_item).addClass('current'); 

    tabs.click(function() { 
     if ($(this).hasClass('current')) { 
      return false; 
     } 

     slide(tabs.index(this)); 
    }); 

    if (options.transition_interval > 0) { 
     var timer = setInterval(function() { 
      slide(); 
     }, options.transition_interval); 

     if (options.pause_on_hover) { 
      tabs.mouseenter(function() { 
       clearInterval(timer); 

      }).mouseleave(function() { 
       clearInterval(timer); 
       timer = setInterval(function() { 
        slide(); 
       }, options.transition_interval); 
      }); 
     } 
     if (output.pause_on_hover) { 
      output.mouseenter(function() { 
       clearInterval(timer); 

      }).mouseleave(function() { 
       clearInterval(timer); 
       timer = setInterval(function() { 
        slide(); 
       }, options.transition_interval); 
      }); 
     } 
    } 
}; 
})(jQuery); 

$(document).ready(function() { 
$.featureList(
    $("#sliderSelection li"),      //Your Menu 
    $("#slider img"),        //Your Content 
    {start_item:0},         //Starting Item 
    5000           //Change Speed 
); 
$.featureList(
    $("#graphicSelect li"),       
    $("#featuredDesign .design"),   
    {start_item:0},         
    1000 
); 
$.featureList(
    $("#webSelect li"),       
    $("#featuredWeb .web"),    
    {start_item:0},         
    1000            
); 
$.featureList(
    $("#marketSelect li"),       
    $("#featuredMarket .market"),   
    {start_item:0},         
    1000            
); 
});

我只是想添加一个delay（）作为第五个参数。我的HTML大约有300行，而我的CSS也很长，所以我不会因此而陷入页面。任何帮助将非常感激！ http://jqueryglobe.com/article/feature-list

来源

2011-06-15 Howdy_McGee

U可以尝试所有包裹 “$ .featureList（）” 与的setTimeout（F，超时）功能部分，确保U盘了超时 PARAM正确

setTimeout(function() { 
    $.featureList(
    $('#sliderSelection li'),      //Your Menu 
    $('#slider img'),        //Your Content 
    {start_item:0},         //Starting Item 
    5000)           //Change Speed 
} , 1000); 

setTimeout(function() { 
    $.featureList(
    $('#graphicSelect li'), 
    $('#featuredDesign .design'), 
    {start_item:0},         
    1000) 
} , 2000); 
setTimeout(function() { 
    $.featureList(
    $('#webSelect li'), 
    $('#featuredWeb .web'),    
    {start_item:0},         
    3000)           
    } , 1000); 

setTimeout(function() { 
    $.featureList(
    $('#marketSelect li'), 
    $('#featuredMarket .market'), 
    {start_item:0},         
    1000)           
} , 1000);

编辑：对不起，我确信以前的代码将工作。我已经更新了它，以确保它很好。证明在：http://jsfiddle.net/uDrg5/2/

来源

2011-06-15 22:05:22 WooDzu

上面的代码工作，但它必须在1单线 - 不知道为什么，但一旦我这样做，它以任何其他方式工作不：/ – 2011-06-16 14:07:54

如果您想要避免修改第三方插件，一种方法是将这些调用包装在基本的js timers中。如果扩展插件，稍后插件会有更新，则需要始终保持更改同步。

var a=setTimeout("CALL1",1000); 
var b=setTimeout("CALL2",2000); 
var c=setTimeout("CALL3",3000); 
var d=setTimeout("CALL4",4000);

其中CALL = FeatureList要运行的效果。

你在这里的另一个选择是为你的方法添加一个参数，就像你提到的那样。你也可以在那里应用上述想法。如果它是我的，并且我正确理解你的问题，我会选择在可能的时候不修改插件源的方法。

来源

2011-06-15 22:10:56

JQuery功能列表幻灯片延迟

回答

相关问题