Question

我有一个幻灯片将元素构建到数组中，我修改了DOM，然后使用数组中的项来淡入和淡出计时器。还有一些我想做的事情，但我不知道从哪里开始。

我想做的两件事：

1）悬停＆amp;单击幻灯片暂停计时器，然后在取消悬停时重启计时器或单击页面上的其他项目。（如果用户点击播放按钮以便幻灯片显示不会移动到下一张幻灯片，则必须允许播放YouTube视频）

我知道我可以这样做：在hover()和click() //暂停计时器

但我不知道如何停止并重新启动setInterval计时器以及将其放在我的代码中的位置

2）第二件事是Youtube视频没有优雅地加载到页面中而不是平滑地淡化它们加载滞后，它们是否可以预加载以实现我正在使用的方法的平滑淡入淡出？

这是我正在使用的小提琴： 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

您可以使用全局布尔变量，例如slidingEnabled来检查滑块是否可以滑动。

当您的商品被悬停（或点击）时，此变量的值会更改为 false ，而当它们被悬停时，此变量的值会更改为 true 。

setInterval（）的回调函数现在可以使用此全局变量来检查滑动操作是否已被赋予。

Answer 2

我会按照S McCrohan的帖子中的建议，使用setInterval和clearInterval将停止和开始自动旋转联系起来。至于这种情况下的实现，我建议将stop()和start()公共方法添加到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();

如何在悬停和内部内容的.click（）上暂停.setInterval（）？

2 个答案: