0

我正在尝试仅使用 jQuery 创建一个自定义滑块我不确定如何使这项工作的最佳实践。

我的滑块有 3 张幻灯片和一个控件部分，每个都与一张幻灯片（1、2、3）相关。

单击控件时，我的幻灯片仅淡出我不确定如何说是否单击了 X 控件，将活动类添加到相关幻灯片？

我做了一个小提琴来解释我希望有帮助，但是我需要的是对这样做的最佳实践的解释？

如果问题难以理解，请见谅！

我用什么来淡出我当前的幻灯片，但是一旦它消失了，我就不能依靠活动类说将一个类添加到下一个元素？

$('.ctrl-one').click(function(){
    $('.active .slide-img').animate({
        'marginRight' : "-=350px"
    }, 500, 'easeOutQuint', function(){
        $('.active .description').fadeOut().promise().done(function(){
            $(this).parent().removeClass('active');
        });
    });
});

http://jsfiddle.net/Esm97/

4

1 回答 1

1

我想这就是你需要的，试试这个代码，但我相信你可以找到很多不同的方法。

$('.controls a').click(function() {
                var current = $(this).attr('class').replace('ctrl-', '');

                if (!$('.sector-banner .' + current).hasClass('active')) {
                    $('.active').animate({
                        'marginRight': "-=350px"
                    }, 500, 'linear', function() {
                        $(this).fadeOut().promise().done(function() {
                            $(this).css('margin-right',0);
                            $(this).removeClass('active');
                            $('.sector-banner .' + current).addClass('active');
                            $('.sector-banner .' + current).fadeIn();
                        });
                    });
                }
            });
于 2013-10-02T14:13:57.050 回答