幻燈片放映第一張幻燈片更長時間

Question

我有一個自定義圖片幻燈片，我不得不修改。我試圖讓第一張幻燈片超時時間更長，基本上我希望它比其他人可見2秒。最好的辦法是什麼？下面是代碼：

(function($) { 

var settings = { 
     'promoid': 'promo', 
     'selectorid': 'promoselector', 
     'promoanimation': 'fade', 
     'timeout': 4500, 
     'speed': 'slow', 
     'go': 'true', 
     'timeoutname': 'promotimeout' 
}; 

$.fn.promofade = function(options) { 
    settings.promoid = $(this).attr("id"); 

    return this.each(function() { 
     $.promofade(this, options); 
    }); 
}; 

$.promofade = function(container, options) { 

    if (options) { 
     $.extend(settings, options); 
    } 

    var elements = $("#" + settings.promoid).children(); 
    var selectors = $("#" + settings.selectorid).children(); 

    if (elements.length != selectors.length) { alert("Selector length does not match."); } 

    if (settings.go == 'true') 
    { 
     settings.timeoutname = setTimeout(function() { 
       $.promofade.next(elements, selectors, 1, 0); 
       }, settings.timeout); 
    } else { 
     clearTimeout(settings.timeoutname); 
    } 
}; 

$.promofade.next = function(elements, selectors, current, last) { 

    if (settings.promoanimation == 'fade') 
    { 
     //$(elements[last]).fadeOut(settings.speed); 
     //$(elements[current]).fadeIn(settings.speed); 
     $(elements[last]).hide(); 
     $(elements[current]).show(); 
    } else if (settings.promoanimation == 'slide') { 
     // This creates a 'slide gap', where they havent crossed yet, causing a blank spot 
     // TODO: fix! 
     $(elements[last]).slideUp(settings.speed); 
     $(elements[current]).slideDown(settings.speed); 
    } 

    $(selectors[last]).removeClass("on"); 
    $(selectors[current]).addClass("on"); 
    //$(selectors[current]).attr("class", "on"); 

    // They are both the same length so we only calculate for one 
    if ((current + 1) < elements.length) { 
     current = current + 1; 
     last = current - 1; 
    } else { 
     current = 0; 
     last = elements.length - 1; 
    } 

    if (settings.go == 'true') 
    { 
     settings.timeoutname = setTimeout(function() { 
      $.promofade.next(elements, selectors, current, last); 
     }, settings.timeout); 
    } else { 
     clearTimeout(settings.timeoutname); 
    } 
}; 
})(jQuery); 

我的HTML被建造出來，像這樣：

<div id="fader"> 
    <a href="#"><img src="#" alt='#'/></a> 
    <a href="#"><img src="#" alt='#'/></a> 
    <a href="#"><img src="#" alt='#'/></a> 
</div> 

Answer 1

你可以通過指定的初始化過程中分配一個單獨的第一張幻燈片超時解決它，然後使用上promofade標準超時。下一個。

(function($) { 

    var settings = { 
      'promoid': 'promo', 
      'selectorid': 'promoselector', 
      'promoanimation': 'fade', 
      'firstslidetimeout':2000, //apply this during $.promofade only 
      'timeout': 4500, 
      'speed': 'slow', 
      'go': 'true', 
      'timeoutname': 'promotimeout' 
    }; 

    $.fn.promofade = function(options) { 
     settings.promoid = $(this).attr("id"); 

     return this.each(function() { 
      $.promofade(this, options); 
     }); 
    }; 

    $.promofade = function(container, options) { 

     if (options) { 
      $.extend(settings, options); 
     } 

     var elements = $("#" + settings.promoid).children(); 
     var selectors = $("#" + settings.selectorid).children(); 

     if (elements.length != selectors.length) { alert("Selector length does not match."); } 

     if (settings.go == 'true') 
     { 
      settings.timeoutname = setTimeout(function() { 
        $.promofade.next(elements, selectors, 1, 0); 
        }, settings.timeout + settings.firstslidetimeout); 
     } else { 
      clearTimeout(settings.timeoutname); 
     } 
    }; 

    $.promofade.next = function(elements, selectors, current, last) { 

     if (settings.promoanimation == 'fade') 
     { 
      //$(elements[last]).fadeOut(settings.speed); 
      //$(elements[current]).fadeIn(settings.speed); 
      $(elements[last]).hide(); 
      $(elements[current]).show(); 
     } else if (settings.promoanimation == 'slide') { 
      // This creates a 'slide gap', where they havent crossed yet, causing a blank spot 
      // TODO: fix! 
      $(elements[last]).slideUp(settings.speed); 
      $(elements[current]).slideDown(settings.speed); 
     } 

     $(selectors[last]).removeClass("on"); 
     $(selectors[current]).addClass("on"); 
     //$(selectors[current]).attr("class", "on"); 

     // They are both the same length so we only calculate for one 
     if ((current + 1) < elements.length) { 
      current = current + 1; 
      last = current - 1; 
     } else { 
      current = 0; 
      last = elements.length - 1; 
     } 

     if (settings.go == 'true') 
     { 
      settings.timeoutname = setTimeout(function() { 
       $.promofade.next(elements, selectors, current, last); 
      }, settings.timeout); 

     } else { 
      clearTimeout(settings.timeoutname); 
     } 
    }; 
    })(jQuery); 

Answer 2

您可能需要在兩個地方進行更改以獲得您想要的內容。

(function ($) { 
    var settings = { 
     'promoid': 'promo', 
     'selectorid': 'promoselector', 
     'promoanimation': 'fade', 
     'timeout': 4500, 
     'firstAdditionalTimeout': 4500, 
     'speed': 'slow', 
     'go': 'true', 
     'timeoutname': 'promotimeout' 
    }; 

    $.fn.promofade = function (options) { 
     settings.promoid = $(this).attr("id"); 
     return this.each(function() { 
      $.promofade(this, options); 
     }); 
    }; 

    $.promofade = function (container, options) { 
     if (options) { 
      $.extend(settings, options); 
     } 
     var elements = $("#" + settings.promoid).children(); 
     var selectors = $("#" + settings.selectorid).children(); 
     //if (elements.length != selectors.length) { 
     // alert("Selector length does not match."); 
     //} 
     if (settings.go == 'true') { 
      settings.timeoutname = setTimeout(function() { 
       $.promofade.next(elements, selectors, 1, 0); 
      }, settings.timeout + settings.firstAdditionalTimeout); // here 
     } else { 
      clearTimeout(settings.timeoutname); 
     } 
    }; 

    $.promofade.next = function (elements, selectors, current, last) { 

     if (settings.promoanimation == 'fade') { 
      //$(elements[last]).fadeOut(settings.speed); 
      //$(elements[current]).fadeIn(settings.speed); 
      $(elements[last]).hide(); 
      $(elements[current]).show(); 
     } else if (settings.promoanimation == 'slide') { 
      // This creates a 'slide gap', where they havent crossed yet, causing a blank spot 
      // TODO: fix! 
      $(elements[last]).slideUp(settings.speed); 
      $(elements[current]).slideDown(settings.speed); 
     } 

     //$(selectors[last]).removeClass("on"); 
     //$(selectors[current]).addClass("on"); 
     //$(selectors[current]).attr("class", "on"); 

     // They are both the same length so we only calculate for one 
     if ((current + 1) < elements.length) { 
      current = current + 1; 
      last = current - 1; 
     } else { 
      current = 0; 
      last = elements.length - 1; 
     } 

     if (settings.go == 'true') { 
      settings.timeoutname = setTimeout(function() { 
       $.promofade.next(elements, selectors, current, last); 
      }, current == 1 ? (settings.timeout + settings.firstAdditionalTimeout) : settings.timeout); // and here 
     } else { 
      clearTimeout(settings.timeoutname); 
     } 
    }; 
})(jQuery); 

DEMO