javascript - JQuery Slider 帮助 - 鼠标悬停事件解决方案

Question

因此，我所寻求的内容在上下文中很简单，但实现起来具有挑战性。

我希望禁用悬停功能，直到用户单击播放按钮，然后单击暂停按钮。

所以，基本上我希望 slider 的鼠标悬停功能无效，直到用户单击取消静音按钮(播放 Youtube 按钮)，然后单击静音按钮(暂停 YT 按钮)。如果您转到JSFiddle您会看到，加载后，如果您的鼠标悬停在 slider 上，然后悬停在外面... slider 会移动(6 秒后)。我不希望 slider 在用户启动 Youtube 视频之前启动。

var W = $('#image_rotator').width(),
N = $('#slider .slide').length,
C = 0,
S = 0,
intv;

if (N <= 1) $('#left, #right').hide();
$('#slider').width(W * N);

$('#left, #right').click(function () {
C = (this.id == 'right' ? ++C : --C) < 0 ? N - 1 : C % N;
$('#slider').stop().animate({
    left: -C * W
}, 300, function () {
    if (C == 0) {
        $('#playiunmute').show();
    }
    if (C == 1) {
        $('#left').show();
    }
    if (C == 1) {
        $('#right').show();
    }
    if (C == 1) {
        $('#playiunmute').hide();
    }
    if (C == 10) {
        $('#slider').css("left", "0");
        $('#right').click();
    }
});
});


function setResetInterval(e) {

var intv = $("#slider");
if (e) {
    timer = setInterval(function () {
        $('#right').click();
    }, 6000);
 } else {
    clearInterval(timer);
 }
 }


 $("#imute").click(function (e) {
  e.preventDefault();
  setResetInterval(true);
  S = 0;
 });
 $("#iunmute").click(function (e) {
  e.preventDefault();
  setResetInterval(false);
  S = 1;
});
$("#playiunmute").click(function (e) {
e.preventDefault();
setResetInterval(false);
S = 1;
});
$('#slider, #left, #right, #playiunmute').hover(function (e) {
    return (e.type == 'mouseleave' && S != 1) ? setResetInterval(true) :    setResetInterval(false);
});


 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 var player;

 function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', {
    height: '460',
    width: '1190',
    controls: 1,
    videoId: 'kDUERmuuogo',
    playerVars: {
        controls: 0,
        showinfo: 0,
        modestbranding: 1,
        wmode: "opaque",
        rel: 0
    },
    events: {
        'onReady': onPlayerReady
    }
 });
 }

function onPlayerReady(event) {
player.mute();
event.target.playVideo();
event.target.setPlaybackQuality("hd720");
}



document.getElementById('iunmute').onclick = function (e) {
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
player.playVideo();
player.seekTo(0);
};

document.getElementById('imute').onclick = function (e) {
player.mute();
player.pauseVideo();
};

document.getElementById('playiunmute').onclick = function (e) {
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
player.playVideo();
};

$('#iunmute').click(function () {
$('#imute').show();
});
$('#iunmute').click(function () {
$('#iunmute').hide();
});
$('#imute').click(function () {
$('#playiunmute').show();
});
$('#imute').click(function () {
$('#imute').hide();
});
$('#playiunmute').click(function () {
$('#imute').show();
});
$('#playiunmute').click(function () {
$('#playiunmute').hide();
});
$('#iunmute').click(function () {
$('#left').hide();
});
$('#iunmute').click(function () {
$('#right').hide();
});
$('#playiunmute').click(function () {
$('#left').hide();
});
$('#playiunmute').click(function () {
$('#right').hide();
});

Answer 1

我有一种感觉，你最初的问题( Trigger Alert When Slider Moves Left A Certain Amount )会困扰我，直到我弄清楚如何使这项工作成功，我是对的!我坐下来想出了一种折衷的解决方案。为了让它正常工作，我取消了您添加的暂停按钮，转而使用普通的 YouTube 播放器控件，因为我可以将监听器附加到它们，从而生成更短且更易于理解的代码。我对此进行了相当彻底的测试，它应该能够准确地实现您所寻找的功能:当视频暂停(或静音)时；我不确定您是否也需要此功能，尽管您将静音按钮与 YouTube 的播放/问题中的暂停按钮，它仍然仍然是静音按钮。)，视频将停止， slider 将前进到下一张幻灯片。当间隔(或用户手动推进幻灯片)最终导致 slider 返回到视频时，视频将从头开始重新开始，并且间隔将被取消，以便播放器前进超过该间隔的唯一方法video 将供用户将视频静音。如果您不希望视频从头开始，可以删除行 player.seekTo(0);在 $("#left, #right").click()处理程序。如果您不希望静音按钮导致幻灯片发生变化，请删除以下间隔函数:

window.setInterval(function(){
if(player.isMuted()) {
    player.pauseVideo();
}}, 100);

以及 player.unMute(); $("#left, #right").click() 中的行处理程序。

下面是我修改/添加的部分代码。我只添加了这部分，以防止我的答案变得比应有的长度更长(就答案而言，它已经较长了)。完整的代码在 Fiddle 中可见。

function onPlayerReady() {
    player.playVideo();
    player.unMute();
    player.setPlaybackQuality("hd720");
    window.setInterval(function(){
    if(player.isMuted()) {
        player.pauseVideo();
    }}, 100);
}

function onPlayerStateChange() {
    if (player.getPlayerState() == 2) {
        $("#right").click();
    }
}

我希望这就是您正在寻找的!

http://jsfiddle.net/IronFlare/6o6kL8pf/2/

如果您有任何疑问，请随时对此答案添加评论。