javascript - 如何在悬停和内部内容的 .click() 上暂停 .setInterval()？

Question

我有一个将元素构建到数组中的幻灯片，我修改了 DOM，然后使用数组中的元素在计时器上淡入淡出。还有几件事我想做，但我不确定从这里到哪里去。

我想做的两件事:

1) 在鼠标悬停并单击幻灯片时暂停计时器，然后在取消悬停或单击页面上的其他元素时重新启动计时器。 (这是必要的，以便在用户单击播放按钮时允许播放 YouTube 视频，这样幻灯片不会移动到下一张幻灯片)

我知道我可以这样做: 在 hover() 和 click() 上 //暂停定时器

但我不确定如何停止和重新启动 setInterval 计时器以及将它放在我的代码中的什么地方

2) 第二点，Youtube 视频不能优雅地加载到页面中，它们加载时会出现延迟，而不是平滑地淡入淡出，是否可以通过我使用的方法预加载它们以实现平滑淡入淡出？

这是我正在使用的 fiddle : http://jsfiddle.net/designaroni/a34yF/

这是我的代码:

HTML:

<div class="slideshow">
    <img src="http://placehold.it/401x401" />
    <img src="http://placehold.it/402x402" />
    <div class="video">
        <iframe width="100%" height="100%" src="//www.youtube.com/embed/cbP2N1BQdYc?rel=0" frameborder="0"></iframe>
    </div>
    <img src="http://placehold.it/404x404" />
    <img src="http://placehold.it/405x405" />
    <div class="video">
        <iframe width="100%" height="100%" src="//www.youtube.com/embed/cbP2N1BQdYc?rel=0" frameborder="0"></iframe>    
    </div>

CSS:

.media .video,
.media img { background-color:#fad400; padding:10px; margin:0px; height:100%;}
.slideshow { width:100%; height:400px; }
.media { height:100%; }

JS

/*
* 1) input objects into arrays 
* 2) write html to remove excess html, add items inside .media div... and other stuff
* 3) do slideshow stuff to the content
*
*
*
*/

(function ($) {

/*make it global*/
//array w/ multiple media types - .video contains youtube iframes
media = $( ".slideshow img, .slideshow .video" );
//remove items from dom
$( ".slideshow img, .slideshow .video" ).remove();
var width = $('.slideshow').width()
// end make globes

//make .media div
$(".slideshow").append("<div class='media'></div>");
//use first and .html() into .media
$(".media").html(media[0]);

$.fn.simpleSlider = function(options)  {
    //give the user options
    var defaults = {
        pause : 5000,
        speed : 400,
        descriptionSpeed: 400,
        transition : 'fade'
    },
    //merge options with defaults
    options = $.extend(defaults, options);
    //if statement
    if(options.transition === 'fade') fadesetint();
    /////////////////////////////////////////////////////////////////
    function fadesetint() {
        //this will start the animation
        fadeBeginNow = setInterval(fade, options.pause);
    }
    /////////////////////////////////////////////////////////////////
    //KEY
    /////////////////////////////////////////////////////////////////
    function currentImageKey() {
        currentMedia = $(".media").children()[0]
        i = $.inArray(currentMedia, media)
        return i;
    }
    /////////////////////////////////////////////////////////////////
    //FORWARD & BACK
    /////////////////////////////////////////////////////////////////
    //will fade & move the slideshow forward one step
    function fade() {
        currentImageKey();
        if (i < media.length -1) {
            fadeImage(i + 1);
        } else {
            fadeImage(0);
        }
    }

    //will fade & move slideshow backward one step
    function fadePrev() {
        currentImageKey();
        if (i == 0) {
            fadeImage (media.length - 1);
        } else {
            fadeImage(i - 1);
        }
    }
    /////////////////////////////////////////////////////////////////
    //ANIMATION
    /////////////////////////////////////////////////////////////////
    //fade animate & change media to variable passed to i
    function fadeImage(i) {
        $('.media').children().stop().animate({
            opacity: 0,
        }, options.speed, function() {
            $(".media").html(media[i]).children().css({opacity: 0})
            $('.media').children().stop().animate({
                opacity: 1
                }, options.speed)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
            })    
        }
    }; // end simpleSlider
})(jQuery);

//this code below runs in your html while plugin above runs in external script 
$('.slideshow').simpleSlider({
    pause : 6000,               //can set transition pause in mill
    speed : 500,                //can set transition speed in mill, this is in ### AND out ###
    descriptionSpeed : 400,     //can set transition speed in mill, this is in ### AND out ###
    transition : 'fade',        //can set to slide or fade
});

Answer 1

我会按照 S McCrohan 链接中的建议使用 setInterval 和 clearInterval 停止和开始自动旋转。至于在这种情况下的实现，我建议将 stop() 和 start() 公共(public)方法添加到您的 simpleSlider，这样您就可以在您想要的任何事件处理程序中调用它们，包括悬停和点击。

$.fn.simpleSlider = function(options)  {

    //declare fadeBeginNow here, so it's available in the scope of this plugin, but not globally
    var fadeBeginNow;

    // All of the code you already have

    this.stop = function () {
        // clear your existing interval. Adjust this to suit your needs.
        clearInterval(fadeBeginNow);
    };

    this.start = function () {
        // restart your interval. Adjust this to suit your needs
        fadesetint();
    };

    // you should (almost) always end a jQuery plugin with this line
    // it provides public method functionality if you want to use them, and allows chaining
    return this;

})(jQuery);

// now store your return value when you instantiate the slider
var slider = $('selector').simpleSlider();

// stop slider
slider.stop();

//start slider
slider.start();