带悬停导航和暂停的jQuery滑块-不使用插件

在我以后尽可能原始地编写jQuery的日子里，没有大量的jQuery插件堆积在一起，也没有让我的页面变慢——我正在尝试创建自己的滑块

我已经创造了一个小提琴我有多远，到目前为止

我的HTML标记不是动态的，幻灯片动画制作过程只是定位的

我遇到的复杂问题是，在下一个动画开始之前，动画必须完全运行，这使得如果您将鼠标悬停在菜单上，我的动画开始排队

我需要一个动画中途停止，但如果悬停改变，并自动运行到下一个动画位置。希望这是有意义的，你会明白我的意思

另外，我希望动画自动在每张幻灯片上运行2000毫秒，如果幻灯片本身悬停，我希望它暂停

我知道我非常希望有人给我写一个自定义的滑块脚本，但是如果能看到一个原始的脚本是如何在没有插件的情况下编写的，那将是非常有帮助和直观的

我需要我的滑块是轻量级的，因此不会生成额外的标记。就像我尝试过的所有插件一样，它们太重太多了。我喜欢纯jquery

任何帮助都将不胜感激。谢谢

请看我使用最新jQuery的迷你小提琴示例

---

你需要看看这些你不喜欢的插件是如何工作的。此时，悬停函数以id为目标-如果以类为目标，则会立即减少代码量，例如：

$('.hover').hover(function(){

$bannerSlide.animate({
        'top' : var                   
    });

});

---

然后，您可以找到一种方法，将位置（var）传递给代码缩减后的it部门。

草率，但可能有助于您开始工作

var banners = $('.banner-slides'),
controls = $('.banner-menu'),
cycle = true,
current = 0;

doCycle();

controls.find('li').hover(function() {

    controls.children().removeClass('hover');
    $(this).addClass('hover');

    animate($(this).index());

    cycle = false;
}, function() {

    cycle = true;
});

function doCycle() {

    if (cycle) {

        if (controls.find('.hover').length > 0) {

            if (controls.find('.hover').next().length > 0) {

                var next = controls.find('.hover').next();

                controls.children().removeClass('hover');
                next.addClass('hover');

                animate(current);
            }
            else {

                controls.children().removeClass('hover');
                controls.children().first().addClass('hover');

                animate(0);
            }
        }
        else {

            controls.children().first().addClass('hover');

            animate(0);
        }
    }

    setTimeout(doCycle, 2000);
}

function animate(pos) {

    banners.stop().animate({top: pos * -200});

    current = pos + 1;
}

---

对于动画队列，您可以使用stop（），我认为您想要的是类似于我不久前编写的toyota.ca主页滑块的东西。看这里的小提琴我喜欢toyota.ca的主页-这几乎就是我正在做的，但是有一个循环。谢谢你的提琴：）我认为他使用ID是因为不同的px动画，但当然你可以在html中包含它，并在需要时获取它。很可能他不知道提取信息的方法谢谢你的反馈。我可以从您的示例中看到如何将值添加到当前css，并将其分配给var，而不是将每个位置单独写入@如果我不需要骑自行车的话，那就太简单了。老兄，非常感谢你。非常感谢。你所做的事有一半人能原谅。因为jslint显示了一些警告，所以我对你的层次结构进行了调整。除此之外，我不知道它是否马虎。很好。虽然我试图让它暂停循环时，图像区域悬停，但没有太多的运气。你能帮忙吗？谢谢，这很酷-我想出来了。非常感谢我似乎在IE中遇到了一些问题，我只是出于某种原因收到了这个警告，无法理解。如果我删除了脚本，那么页面是无错误的。-你不知道为什么吗？好的，我已经复制了这个问题所以bizzare，我已经单独使用了脚本，页面上没有任何内容，因为现在所有浏览器都会出现相同的IE错误。无法理解错误的含义。抱歉，请再次忽略该错误。我发现了这个问题，我还在加载一个名为bxslider的jquery幻灯片放映插件——这只在IE weirldy中存在冲突。删除了，瞧，现在效果很好。再次感谢。