2

所以这就是我想要做的。我在 3 个不同的列中滑动 3 个 div。我想对此脚本进行延迟，以便 3 列以相同的速度变化，但它们在不同的时间变化。这是javascript

/*
* 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() 作为第 5 个参数。我的 HTML 大约有 300 行长，而我的 css 也一样长，所以我不会因此而使页面陷入困境。任何帮助将非常感激！ http://jqueryglobe.com/article/feature-list

4

2 回答 2

2

你可以尝试用setTimeout(f, timeOut )函数包装所有“ $.featureList() ”部分，确保你正确设置了timeOut参数

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-15T22:05:22.243 回答
1

如果您想避免修改 3rd 方插件，一种方法是将这些调用包装在基本的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-15T22:10:56.547 回答