Задержка слайдов в списке возможностей JQuery - PullRequest
Новая
       79

Задержка слайдов в списке возможностей JQuery

2 голосов
/ 16 июня 2011

Так вот что я пытаюсь сделать.Я скользя 3 делить в 3 разных столбцах.Я хочу установить задержку для этого сценария, чтобы 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-го параметра.мой HTML имеет длину около 300 строк, а мой CSS такой же длинный, так что я не буду увлекаться этим.Любая помощь приветствуется!http://jqueryglobe.com/article/feature-list

Ответы [ 2 ]

2 голосов
/ 16 июня 2011

можете U попробовать обернуть все разделы " $. FeatureList () " с setTimeout (f, timeOut ) , убедитесь, что U настроил 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/

1 голос
/ 16 июня 2011

Если вы хотите избежать изменения стороннего плагина, один из способов - заключить эти вызовы в базовые таймеры js . Если вы расширили его и позже добавили обновление для плагина, вам всегда нужно синхронизировать изменения. 

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

Где CALL = FeatureList, с которым вы хотите запускать эффекты.

Другой вариант, который у вас есть, - добавить параметр в метод, как вы упомянули. Вы также можете применить вышеупомянутую идею там. Если бы это был я, и я правильно понял ваш вопрос, я бы выбрал подход, который не изменял источник плагина, когда это возможно.

...