Question

刚开始使用FE网站开发。我发现了这个我非常喜欢的图像浏览器。得到它可以处理我的文件。但是，我在同一个HTML文件中多次使用同一个图像查看器时遇到问题。任何人都可以指出我做错的方向吗？

HTML：

<div id="slider">
    <h3>EventGlance UI Mock Ups</h3>
    <a href="#" class="control_next">></a>
    <a href="#" class="control_prev"><</a>
    <ul>
      <li><img src="images/1.jpg" height="568" width="320" /></li>
      <li><img src="images/2.jpg" height="568" width="320" /></li>
      <li><img src="images/3.jpg" height="568" width="320" /></li>
      <li><img src="images/4.jpg" height="568" width="320" /></li>
    </ul>  
</div>

的JQuery / JS：

jQuery(document).ready(function ($) {
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        event.preventDefault(); 
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        event.preventDefault(); 
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

Answer 1

您无法在同一页面上使用此滑块的多个版本，因为它专门针对#slider，ID＆s是唯一的，这会导致问题。

我建议使用像Owl Carousel这样的东西，它非常受GitHub上3500个星星的欢迎，你可以轻松地将它设置为目标类名，并且比将代码重写为插件要容易得多

如果您确实想使用现有代码，最好的办法是将其转换为插件，将代码应用于您选择的所有元素，但您必须删除对#slider的引用并在你循环的元素的上下文中做所有事情。

如何将其转换为插件的示例如下：

(function( $ ) {

    // Your slider plugin, $(selector).slider();
    $.fn.slider = function() {

        // Rather than target a single element, this will take one
        // or more results from your selector and loop over it
        return this.each(function() {

            // $self will now be the equivalent of #slider
            // in your demo code, everything else selected
            // will use it as context
            var $self = $(this),
                $list = $self.find('ul'),
                $listItems = $list.find('li'),

                // Your original variables
                slideCount = $listItems.length,
                slideWidth = $listItems.width(),
                slideHeight = $listItems.height(),
                sliderUlWidth = slideCount * slideWidth;

            // $self now references .slider
            $self.css({ width: slideWidth, height: slideHeight });

            // $list now references .slider > ul
            $list.css({ width: sliderUlWidth, left: 0 });

            // .find is quicker than context, use $list to find
            // last child
            $list.find('li:last-child').prependTo( $list );

            // No need for functions as there's no re-use going on,
            // also in your demo event.preventDefault did nothing
            $self.find('a.control_prev').on('click', function (e) {
                e.preventDefault(); 
                $list.animate({
                    left: + slideWidth
                }, 200, function () {
                    $list.find('li:last-child').prependTo( $list );
                    $list.css('left', '');
                });
            });

            // Once again, no need for function especially when you
            // weren't passing your event object through anyway
            $self.find('a.control_next').on('click', function (e) {
                e.preventDefault(); 
                $list.animate({
                    left: - slideWidth
                }, 200, function () {
                    $list.find('li:first-child').appendTo( $list );
                    $list.css('left', '');
                });
            });
        });

    };

}( jQuery ));

// Usage example:
$( ".slider" ).slider();

我已经开始为您构建了一个基本插件，其中包含一些演示HTML和CSS（我假设您已经应用了样式，并且未包含在演示中）。你可以在这里查看jsfiddle：

https://jsfiddle.net/71j5psr0/31/

多次使用相同的jQuery函数的问题

1 个答案: