Question

我使用jQuery脚本在website上滑动图片。我不知道如何修复我的hover（现在它只需要滑动1个徽标，当我需要滑动直到鼠标输出时）和click效果（滑动1个徽标）我的＆＃ 34;下一个＆＃34;和＆＃34; prev＆＃34;的按钮。

以下是我尝试过的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个事件添加到我的按钮，但我仍然需要在按钮上添加hover效果将徽标滑动到mouseout。有人能指出我正确的方向吗？

EDIT-2 - 有新的jq代码，我现在需要的是当鼠标悬停在箭头上时滚动我的徽标直到它出来，所以我希望当我在箭头上时滚动徽标1by1直到游标离开，暂时我需要出去并继续箭头滚动下一个徽标，我还需要添加鼠标悬停滚动的速度，thnaks .. 按钮的新JQ scritp

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

你的小提琴中有一些时髦的东西。

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

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

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

我们需要分两步考虑悬停 - 鼠标 over 和鼠标 out 。对于每个步骤，我们将设置或清除一个定时器变量，该变量将为传送带提供我们想要的效果。我们称之为变量hoverCycle。

首先，mouseover：

//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

注意：这不是很好，但我给你留下了扩展空间。

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

1 个答案: