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

5番目のパラメーターとしてdelay（）を追加したいだけです。私のHTMLは約300行の長さで、cssも同じくらい長いので、それでページをぶち壊すことはありません。どんな助けでも大歓迎です！ http://jqueryglobe.com/article/feature-list

4

2 に答える 2

2

すべての「$.featureList()」セクションをsetTimeout( f, timeOut )関数でラップしてみてください。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

サード パーティのプラグインを変更したくない場合は、これらの呼び出しを基本的なjs タイマーでラップする方法があります。それを拡張し、後でプラグインに更新がある場合は、常に変更を同期しておく必要があります。

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 に答える