1

我有以下代码，它使用 jQuery 更改页面的背景。我有下一个、上一个和播放/暂停的按钮。它像这样工作得很好：

<script type="text/javascript">
var imageSet = ["1.JPG", "2.JPG", "3.JPG", "4.JPG", "5.JPG", "6.JPG"];
var currentImageSet = 0;

function changeBackgroundImages() {
    img2Fade();
    setTimeout(img1Fade, 5000);
}

function img1Fade(){
    $('#back-img1').css({background: 'url(./img/bgimgs/small/' + imageSet[++currentImageSet] + ')'});
    $('#back-img1').ready( function() { 
        $('#back-img1').fadeIn('slow');
        $('#back-img2').fadeOut('slow');
        if (currentImageSet >= imageSet.length - 1) {
                currentImageSet -= imageSet.length;
            };
    });
}

function img2Fade(){
    $('#back-img2').css({background: 'url(./img/bgimgs/small/' + imageSet[++currentImageSet] + ')'});
    $('#back-img2').ready( function() { 
        $('#back-img2').fadeIn('slow');
        $('#back-img1').fadeOut('slow');
        if (currentImageSet >= imageSet.length - 1) {
                currentImageSet -= imageSet.length;
            };
    });
};

function PlaySlide () {
    setInterval(changeBackgroundImages, 10000);
};

function NavigateSlide () {
    $('#prev-arrow').click(function() {
        var back1display = $( '#back-img1' ).css( "display" );
        var back2display = $( '#back-img2' ).css( "display" );
        if(back1display == 'block'){
                if (currentImageSet <= 0) {
                        currentImageSet = imageSet.length-1;
                    };
            $('#back-img2').css({background: 'url(./img/bgimgs/small/' + imageSet[--currentImageSet] + ')'});
            $('#back-img2').ready( function() { 
                $('#back-img2').fadeIn('slow');
                $('#back-img1').fadeOut('slow');
            });
        } else if (back2display == 'block'){
                if (currentImageSet <= 0) {
                        currentImageSet = imageSet.length-1;
                    };
            $('#back-img1').css({background: 'url(./img/bgimgs/small/' + imageSet[--currentImageSet] + ')'});
            $('#back-img1').ready( function() { 
                $('#back-img1').fadeIn('slow');
                $('#back-img2').fadeOut('slow');
            });
        };
    });
    $( '#next-arrow' ).click(function() {
        var back1display = $( '#back-img1' ).css( "display" );
        var back2display = $( '#back-img2' ).css( "display" );
        if(back1display == 'block'){
            img2Fade();
        } else if (back2display == 'block'){
            img1Fade();
        };
    });
};

$(document).ready(function(){
    var paused = 0;

    if(paused == 0) {
        PlaySlide ();
    } else if (paused == 1) {
        NavigateSlide ();
    };
});
</script>

也就是说，如果我在代码中将“暂停”的值写入 0 或 1。当我尝试使用“播放/暂停”按钮上的单击事件更改“暂停”的值时，我的问题就开始了。为此，我在文档就绪函数中有以下代码：

$('#play-btn').click(function(){ 
        paused = pause();
        if(paused == "0") {
            $('#jQuery_log').html( "Slideshow playing | pause = " + paused )
            PlaySlide ();
        } else if(paused == "1")  {
            $('#jQuery_log').html( "Slideshow paused | pause = " + paused )
            NavigateSlide ();
        };
    });

和pause ()功能：

function pause() { 
          if (paused == 0) {
              $('#gal-play').css({background: 'url(./img/other_resources/gal_play.png)'});
              return 1;
          } else if (paused == 1) {
              $('#gal-play').css({background: 'url(./img/other_resources/gal_pause.png)'});
              return 0;
          };
    };

这也有效，直到某个时候。它会更改“暂停”的值，但在单击按钮后不会停止执行PlaySlide ()或功能。NavigateSlide ()

任何人都可以提出一个好的方法吗？

4

1 回答 1

3

您需要停止间隔以暂停它：

var play;
function PlaySlide () {
    play = setInterval(changeBackgroundImages, 10000);
};
function StopSlide () {
    clearInterval(play);
};
于 2013-10-20T19:28:17.843 回答