jquery - 播放/暂停切换按钮 jquery 幻灯片

Question

我创建了幻灯片，但在添加暂停/播放切换按钮时遇到问题。知道我做错了什么吗？该按钮无法正确切换或暂停幻灯片。

这是我的jsfiddle:http://jsfiddle.net/L7yKp/103/

这是我遇到问题的部分:

  $('#stop').click( function() {
         stop();
         showPlay();
         } );

  $('#play').click( function() {
         start();
         showPause();
         } );

   function showPause() {
      $('#play').hide();
      $('#stop').show();
       }

    function showPlay() {
       $('#stop').hide();
       $('#play').show();
       }

Answer 1

这是一个使用变量stop的示例。

http://jsfiddle.net/L7yKp/104/

初始化stop变量

var stop = false;

如果单击停止按钮，则将 stop 设置为 true。

$('#stop').click( function() {
    stop = true;
    //stop();
    showPlay();
} );

如果单击播放按钮，则将 stop 设置为 false 并调用 runSlideShow() 开始幻灯片放映。

 $('#play').click( function() {
    stop = false;
    runSlideShow();
    showPause();
 } );

在您的 slideShow 函数中，如果 stop 为 true，则返回 false 这将停止该函数的运行。从而停止幻灯片放映。

var slideShow = function(){
    if(stop)
        return false;
    ....
}

我没有从页面加载的那一刻起就运行幻灯片，而是调用了 showPlay() ，这样暂停按钮就会被隐藏，并且幻灯片在单击之前不会开始。

showPlay();
//runSlideShow();

希望这个示例能够帮助您入门并给您一个想法。这只是您可以实现的多种方法之一。