javascript - jquery 暂停/播放幻灯片

Question

我需要向一些用于幻灯片放映的现有 jquery 代码添加一个暂停/播放按钮。

当单击“暂停幻灯片”类的范围时，幻灯片放映应停止在当前幻灯片上，暂停按钮隐藏，播放按钮可见。

显然，当单击“播放幻灯片”类的跨度时，它将恢复幻灯片放映，隐藏播放按钮并使暂停按钮再次可见。

任何指示将不胜感激。

Jquery

var slide={ 
    init:function(){
        $('#section-heading-images').children('div.slide_image').each(function(index){
            if(! $(this).hasClass('active')){
                $(this).show();
            }
            //var diff=$('#section-heading-images').height() - $(this).children('div.slide_text_container').height() ;
            //$(this).children('div.slide_text_container').css('top',diff);
            if(! $(this).hasClass('active')){
                $(this).hide();
            }
        });
    }
}

var headimages={    
    slideSwitch:function(){
        var current=$('#section-heading-images div.active');
        var next;

        if(current.next('div.slide_image').length > 0){
            next=current.next();
        }else{
            next=current.parent().children('div.slide_image:first');
        }
        headimages.showNextSlide(current,next); 
    },
    setSlides:function(){
        $('span.section-heading-pointer').click(function(){
            $('div.slide_image').stop(true,true)
            var current_id=$(this).attr('id').substr(24);
            //var next=$('#section-heading-image-'+current_id);
            var current=$('#section-heading-images div.active');
            headimages.showNextSlide(current,current_id);
        });
    },
    showNextSlide:function(current,next){
        //Next is a jQuery object
        if(next instanceof $) {
            navNext = $("#slide-switcher > .active").next();
            if(navNext.attr("class") != "section-heading-pointer" && navNext.attr("class") != "section-heading-pointer ") navNext = $("#section-heading-pointer-0");
        }
        //Next is an id
        else{
            var nid = next;
            next=$('#section-heading-image-'+nid);
            var navNext = $("#section-heading-pointer-"+nid);
        }
        // Put the existing on top
        $(current).removeClass('active');
        $(next).addClass('active');

        $("#slide-switcher > .active").removeClass("active");
        $(navNext).addClass("active");

        // Reveal the next slide underneath the current
        $(next).show();
        $(current).css('z-index',1);

        // Fade the current slide out
        $(current).fadeOut(1500);
        // Put the revealed slide on top
        $(next).css('z-index',0);

    },
    init:function(){
        var minheight=0;
        $('#section-heading').children('div.slide_image').each(function(index){
            $(this).show();
            if(minheight==0){
                minheight=$(this).height();
            }
            if($(this).height < minheight){
                minheight=$(this).height();
            }
            $(this).hide();
        });
        headimages.setSlides();
    }
}

$(document).ready(function() {
    if($('#section-heading').length > 0){
        headimages.init();
        slide.init();
        if($('#section-heading-images').children('div.slide_image').length > 1){
            setInterval( "headimages.slideSwitch()", 8000);
        }else{
            $('#slide-switcher').hide();
        }
    }   

    $('span.arrow_right').click(function(){
        $('div.slide_image').stop(true,true)
        var current_id=$(this).attr('id').substr(24);
        //var next=$('#section-heading-image-'+current_id);
        var current=$('#section-heading-images div.active');
        headimages.showNextSlide(current,current_id);
    });

});

HTML

<div id="section-heading">
        <div id="section-heading-images">   
            <div id="section-heading-image-0" class="slide_image">

                <div class="image-container">
                    <img src="image_zero.jpg" alt="" height="330" width="1000">
                </div>
            </div>

            <div id="section-heading-image-1" class="slide_image">
                <div class="image-container">
                    <img src="image_one.jpg" alt="" height="330" width="1000">
                </div>
            </div>

            <div id="section-heading-image-2" class="slide_image">
                <div class="image-container">
                    <img src="image_two.jpg" alt="" height="330" width="1000">
                </div>
            </div>




        <div id="section-heading-selectors">
            <div id="slide-switcher">
                <span class="section-heading-pointer" id="section-heading-pointer-0"></span>
                <span class="section-heading-pointer" id="section-heading-pointer-1"></span>
                <span class="section-heading-pointer" id="section-heading-pointer-2"></span>
                <span class="pause-slide">Pause</span>
                <span class="play-slide">Play</span>
            </div>
        </div>
</div>

Answer 1

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

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

初始化停止变量

var stop = false;

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

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

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

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

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

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

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

showPlay();

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