0

在我尽可能原始地编写 jQuery 的后期，并且没有大量 jQuery 插件堆积并减慢我的页面速度 - 我正在尝试创建自己的滑块。

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

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


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

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

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

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

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


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


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

http://jsfiddle.net/EYDtF/

在此处输入图像描述

4

2 回答 2

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/

于 2012-06-26T18:03:43.220 回答
0

你需要看看这些你不喜欢的插件是如何工作的。在您悬停功能的那一刻，目标是一个 id - 如果您针对一个类，您会立即减少代码量，例如

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

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

});

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

于 2012-06-26T17:31:53.363 回答