Question

我终于完成了我已经开始的工作。我创建了一个响应式灯箱幻灯片！

但是，我有点面临一个问题。我想把它变成一个库...换句话说，我希望代码能够应用于我可以无限添加的html类（就像所有库一样）。

谢谢！

＆＃13;

var imageSliding = $('.box > .img');
        $('.lightbox').click(function() {
            $('.backdrop, .box').animate({
                'opacity': '.50'
            }, 300, 'linear');
            $('.box').animate({
                'opacity': '1.00'
            }, 300, 'linear');
            $('.backdrop, .box').css('display', 'block');
        });

        $('.close').click(function() {
            close_box();
        });

        $('.backdrop').click(function() {
            close_box();
        });

        function close_box() {
            $('.backdrop, .box').animate({
                'opacity': '0'
            }, 300, 'linear', function() {
                $('.backdrop, .box').css('display', 'none');
            });
        }

        /* Slider */
        var speed = 100;

        $(".prev").click(function() {
            var gallery = $(this).closest('.box').find("ul.gallery"),
                now = gallery.children(":visible"),
                last = gallery.children(":last"),
                prev = now.prev();
            prev = prev.index() == -1 ? last : prev;
            now.fadeOut(speed, function() {
                prev.fadeIn(speed);
            });
        });

        $(".next").click(function() {
            var gallery = $(this).closest('.box').find("ul.gallery"),
                now = gallery.children(":visible"),
                first = gallery.children(":first"),
                next = now.next();
            next = next.index() == -1 ? first : next;
            now.fadeOut(speed, function() {
                next.fadeIn(speed);
            });
        });

        $(".gallery li").click(function() {
            var first = $(this).parent().children(':first'),
                next = $(this).next();
            next = next.index() == -1 ? first : next;
            $(this).fadeOut(speed, function() {
                next.fadeIn(speed);
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

请参阅jQuery主要文档：basic-plugin-creation

TeamTreehouse也有一个很好的教程关于这个：writing-your-own-jquery-plugins

JQuery =＆gt;如何使代码成为库

1 个答案: