javascript - 使 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

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

类似的东西应该有效。