jQuery暂停/播放幻灯片

Question

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

单击具有“ pause-slide”类的跨度时，幻灯片放映应停止在当前幻灯片上，隐藏暂停按钮，并使播放按钮可见。

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

任何指针将不胜感激。

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

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

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

而不是从页面加载的那一刻开始运行幻灯片，我调用了showPlay（），以便隐藏暂停按钮，直到单击后幻灯片才开始播放。

showPlay();

希望这个例子可以帮助您入门并给您一个想法。 这只是您可以执行的多种方式之一。