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

Question

在我以后的日子里写jQuery尽可能原始，并且没有大量的jQuery插件堆叠起来并减慢我的页面速度 - 我正在尝试创建自己的滑块。

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

我的HTML标记不是动态的 - 幻灯片动画过程只是位置。

我遇到的复杂情况是动画必须在下一个动画开始之前完全运行，这会让我的动画开始排队，如果你将鼠标悬停在菜单上。

如果悬停发生变化，我需要动画停止一半，并自动运行到下一个动画位置。希望这是有道理的，你会在fiddle中看到我的意思。

此外，我希望动画自动浏览每张幻灯片和2000毫秒 - 如果幻灯片本身悬停，我希望它暂停。

我知道我几乎要求有人给我写一个自定义滑块脚本，但是看看如何用插件编写原始脚本会非常有用和直观。

我需要我的滑块很轻，因此不会产生额外的标记。就像我尝试过的所有插件一样，重量太大了。我喜欢普通的jquery。

任何帮助都会受到赞赏。感谢

请使用最新的jQuery查看我的微型小提琴示例。

http://jsfiddle.net/EYDtF/

Answer 1

马虎但可能有助于你开始

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

http://jsfiddle.net/imoda/EYDtF/5/

Answer 2

你需要看看你不喜欢的这些插件是如何工作的。目前，您将悬停功能定位为一个ID - 如果您定位一个类，则会立即减少代码量，例如

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

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

});

然后你可以找到一种方法将位置（var）传递给它，减少你的代码。