javascript - 为滑动图像添加悬停和 onclick 效果？

Question

我正在使用 jQuery 脚本在我的 website 上滑动图像。我不知道如何修复我的 hover (现在，当我需要滑动直到鼠标移出时，它只滑动 1 个 Logo )和 click 效果(滑动 1 个 Logo )我的“下一个”和“上一个”按钮。

这是我尝试过的 2 个按钮的 JavaScript:

if(o.btnPrev)
        $(o.btnPrev).click(function() {
            return go(curr-o.scroll);
        });

    if(o.btnNext)
        $(o.btnNext).click(function() {
            return go(curr+o.scroll);
        });

    if(o.btnGo)
        $.each(o.btnGo, function(i, val) {
            $(val).click(function() {
                return go(o.circular ? o.visible+i : i);
            });
        });

编辑 - 我找到了如何向按钮添加 hover 和 click 事件，但我仍然需要添加 悬停按钮上的效果，滑动 Logo 直到鼠标移出。有人可以指出我正确的方向吗？

EDIT-2 - 有新的 jq 代码，我现在需要的是当鼠标悬停在箭头上时滚动我的 Logo ，直到其消失，所以我希望当我在箭头上时滚动我的 Logo 逐一滚动 Logo ，直到光标消失，目前我需要出去并按箭头滚动下一个 Logo ，我还需要添加鼠标悬停时滚动的速度，thnaks.. 新的按钮 JQ 脚本

if(o.btnPrev)
        $('#previous').click (function () {
            return go(curr-o.scroll);
        });

    if(o.btnNext)
        $('#next').click (function ()  {
            return go(curr+o.scroll);
        });

    if(o.btnGo)
        $.each(o.btnGo, function(i, val) {
            $(val).click (function()  {
                return go(o.circular ? o.visible+i : i);
         });

});

    if(o.btnPrev)
        $('#previous').mouseover(function () {
            return go(curr-o.scroll);
        });

    if(o.btnNext)
        $('#next').mouseover(function ()  {
            return go(curr+o.scroll);
        });

    if(o.btnGo)
        $.each(o.btnGo, function(i, val) {
            $(val).mouseover(function()  {
                return go(o.circular ? o.visible+i : i);
         });

    });

这是带有完整 JQ 脚本的 JSFiddle :http://jsfiddle.net/Lfy6Y/21/

Answer 1

你的 Fiddle 中有一些有趣的东西。

1.) 您没有为滚动按钮声明 mouseover 事件。 如果您希望鼠标悬停时发生某些事情，则需要声明它。

2.) 你的代码很困惑；调试起来会很痛苦。 我将逐步解释该过程，我们将制作一个丑陋(但实用)的演示，以便您可以扩展。

如何思考问题

您需要两个按钮，每个按钮都有自己的 click、mouseenter 和 mouseout 调用。点击是非常不言自明的。 mouseenter 和 mouseout 事件创建的悬停效果需要使用 setInterval 来重复“循环”操作。

让我们使用简单 HTML 来表达这个想法:

<div id="leftButton">Left</div>

<div id="conveyor">
    <img src="..." />
    <img src="..." />
    <img src="..." />
</div>

<div id="rightButton">Right</div>

我们将把 JavaScript 分成几个部分。首先，让我们定义一个函数来向左循环图像，另一个函数向右循环图像:

function cycleRight() {
    var lastImg = $("#conveyor").find("img").last();
    lastImg.remove();
    $("#conveyor").prepend(lastImg);
}
function cycleLeft() {
    var firstImg = $("#conveyor").find("img").first();
    firstImg.remove();
    $("#conveyor").append(firstImg);   
}

接下来，让我们将这些函数绑定(bind)到按钮的单击事件:

//If we click either button, let's cycle the conveyor.
$("#rightButton").click(cycleRight);
$("#leftButton").click(cycleLeft);

我们需要分两个步骤考虑悬停——鼠标悬停和鼠标移出。对于每个步骤，我们将设置或清除一个计时器变量，这将为传送带提供我们想要的效果。我们将该变量称为“hoverCycle”。

首先，鼠标悬停:

//The mouse-enter (ie: the *start* of the hover)
$("#rightButton").on("mouseenter", function() {
    clearInterval(hoverCycle);
    hoverCycle = setInterval(cycleRight, 200);
});
$("#leftButton").on("mouseenter", function() {
    clearInterval(hoverCycle);
    hoverCycle = setInterval(cycleLeft, 200);
});

最后是mouseout——它只需要清除hoverCycle变量:

//The mouse-out (ie: the *end* of the hover)
$("#rightButton").on("mouseout", function() {
    clearInterval(hoverCycle);
});
$("#leftButton").on("mouseout", function() {
    clearInterval(hoverCycle);
});

<强> JSFiddle

注意:这不太漂亮，但我给你留下了扩展的空间。