Question

我正在尝试使用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/

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

在jQuery中创建自定义滑块

1 个答案: