使 JS 幻灯片的第一张幻灯片持续时间更长

Question

我有这个小幻灯片脚本（与 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 方面不是很有用，所以希望有人能提供帮助:)

Answer 1

添加自定义超时：

$(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 
}

Answer 2

您可以使用自定义超时专门针对 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;
  }
}

类似的东西应该有用。

使 JS 幻灯片的第一张幻灯片持续时间更长

Make the first slide of a JS slideshow last longer

html

javascript

jquery