Question

我有一些javascript / jQuery创建了一个简单的幻灯片。我正在学习jquery，因为我去了这里...而且我很难理解如何修改这一部分JS以在停止之前循环x次。截至目前，它在无限循环上进行幻灯片放映。有什么建议？谢谢！

<script>
function slideSwitch() {
    var $active = $('#slideshow DIV.active');

if ( $active.length == 0 ) $active = $('#slideshow DIV.item:last');

var $next =  $active.next().length ? $active.next()
    : $('#slideshow DIV.item:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
        });
}

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
</script>

Answer 1

<script>

var loop = 0;

function slideSwitch() {

    var $active = $('#slideshow DIV.active');

if ( $active.length == 0 ) $active = $('#slideshow DIV.item:last');

var $next =  $active.next().length ? $active.next()
    : $('#slideshow DIV.item:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
        });
}
    loop++;


    $(function() {
        if(loop < 5){
           setInterval( "slideSwitch()", 5000 );
        }
    });
</script>

Answer 2

5次后只需clearTimeout()：

var timeout, count = 0, x = 5; // change 5 to the amount of times you want it to go

function slideSwitch()
{

  var $active = $('#slideshow DIV.active');

  if ( $active.length == 0 ) $active = $('#slideshow DIV.item:last');

  var $next =  $active.next().length ? $active.next()
    : $('#slideshow DIV.item:first');

  $active.addClass('last-active');

  $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
      $active.removeClass('active last-active');
    });

  count++;
  if(count == x) clearTimeout(timeout);

}

$(function() {
    timeout = setInterval(slideSwitch, 5000);
});

简单的幻灯片jQuery，需要它在5张幻灯片后结束。救命？

2 个答案: