让 JS 幻灯片的第一张幻灯片持续更长时间答案

【问题标题】：Make the first slide of a JS slideshow last longer让 JS 幻灯片的第一张幻灯片持续更长时间
【发布时间】：2015-01-07 09:31:50
【问题描述】：

我有这个小幻灯片脚本（使用 jquery 循环插件http://jquery.malsup.com/cycle/options.html）：

$(document).ready (function(){
$('#banner .slides').cycle({
    slideExpr: ' .slide',
    cleartypeNoBg: ' true' ,
    fx: 'fade',
    timeout: 4000,
    fit: 1,
    prev:   '.previous-btn', 
    next:   '.next-btn', 
    width:890
});

连同html：

<div id="banner">
  <div class="wrapper">
    <div class="slides">
     <div class="slide slide1 group" id="slide1">1</div>
     <div class="slide slide2 group">2</div>
     <div class="slide slide3 group">3</div>
     <div class="slide slide4 group">4</div>
    </div>
  </div>
</div>

我想让幻灯片的第一张幻灯片持续更长时间（例如 8000）。我在 JS 方面不是很有用，所以希望有人能提供帮助:)

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以使用自定义超时来专门针对 ID 为“slide1”的第一张幻灯片。

$(document).ready (function(){
  $('#banner .slides').cycle({
  slideExpr: ' .slide',
  cleartypeNoBg: ' true' ,
  fx: 'fade',
  timeout: 4000,
  fit: 1,
  prev:   '.previous-btn', 
  next:   '.next-btn', 
  width:890,
  timeoutFn: calculateTimeout
});

function calculateTimeout(currSlideElement, nextSlideElement, options, forwardFlag){
  if(currSlideElement.id === "slide1"){
     return 8000;
  } else {
     return 4000;
  }
}

类似的东西应该可以工作。

【讨论】：

非常感谢 Yoleg，它就像一个魅力。我尝试使用 timeoutFn 但我有点迷失了......一旦我阅读了解决方案，似乎总是很容易:)

【解决方案2】：

添加自定义超时：

$(document).ready (function(){

    $('#banner .slides').cycle({
        slideExpr: ' .slide',
        cleartypeNoBg: ' true' ,
        fx: 'fade',
        timeout: 4000,
        fit: 1,
        prev:   '.previous-btn', 
        next:   '.next-btn', 
        width:890,
        timeoutFn: customTimeout // here
    });

});

function calculateTimeout(cur, next, opts, isForward) { 
    var index = opts.currSlide; 
    return index == 0 ? 2000 : false;
    // note that returning false will revert to default timeout length 
}

【讨论】：