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;
  }
}

这样的事情应该有用。

Answer 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 
}

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

2 个答案: