Question

所以我有三个具有相同轮播效果的DIV。我敢肯定，我可以使用三种不同的JavaScript代码来一次移动一个，但是希望尽可能地减少代码。使用当前代码，当我单击箭头一次时，它们全部三个都移动了。如何让他们分开移动？

与下面的三个相同：

(function ($) {
    $.fn.thumbGallery = function (settings) {
        var $this = $(this);
        return this.each(function () {
            settings = jQuery.extend({
                speed: 1000,
                leftArrow: $this.find('.arrow-left'),
                rightArrow: $this.find('.arrow-right'),
                galleryContainer: $this.find('.gallery-inner'),
                visibleImagesSize: 4
            }, settings);

            var imgElements = settings.galleryContainer.find('img').length;
            var size = settings.visibleImagesSize;

            //settings.leftArrow.hide();

            if (imgElements > settings.visibleImagesSize) {
                settings.rightArrow.show();
            } else {
                //settings.rightArrow.hide();
            }

            function animateLeft() {
                var el = settings.galleryContainer.children(":last");

                settings.galleryContainer.animate({
                    left: '+=' + el.outerWidth(true) + 'px'
                },
                    settings.speed);
            }

            function animateRight() {
                var el = settings.galleryContainer.children(":first");
                settings.galleryContainer.animate({
                    left: '-=' + el.outerWidth(true) + 'px'
                },
                    settings.speed);
            }

            function checkArrows() {
                if (size === settings.visibleImagesSize) {
                    //settings.leftArrow.hide();
                } else {
                    settings.leftArrow.show();
                }

                if (size === imgElements) {
                    //settings.rightArrow.hide();
                } else {
                    settings.rightArrow.show();
                }
            }

            settings.leftArrow.click(function () {
                animateLeft();
                size--;
                checkArrows();
            });

            settings.rightArrow.click(function () {
                animateRight();
                size++;
                checkArrows();
            });

        });
    };
})(jQuery);



$(document).ready(function () {
    $('.gallery').thumbGallery();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
    <h2>Open Space</h2>
    <p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
    <center>
        <div class="gallery">
            <div class="arrow-left">
                <div class="arrow-left-small">
                </div>
            </div>
            <div class="gallery-outer">
                <div class="gallery-inner">
                    <div class="gallery-tmb">
                        <img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
                    </div>
                </div>
            </div>
            <div class="arrow-right">
                <div class="arrow-right-small">
                </div>
            </div>
        </div>
        <span class="btn_margin">
    <asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
  </span>
    </center>
</div>

Answer 1

它们一起移动的原因是因为在调用.gallery时使用了thumbsGallery()选择器，该选择器适用于HTML代码中具有class="gallery"的所有元素。您可以做的就是简单地向每个图库添加唯一的id并使用每个选择器调用thumbsGallery()。

HTML：

<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>

Javascript：

$(document).ready(function () {
    $('.gallery#executive_gallery').thumbGallery();
    $('.gallery#conference_gallery').thumbGallery();
    $('.gallery#open_gallery').thumbGallery();
});

JSFiddle：https://jsfiddle.net/3qeLumkp/1/

如何获取此代码以一次移动一个班级

1 个答案: