Question

目前我还不知道如何解决这个问题（请参阅代码和示例）。首先应该向左走，在点击左边后，从右边应该是第一个元素，并从DOM第一个元素完全删除，这是不可见的。所有这一切都应该是动画的。

HTML

<div class="wrapper">
    <a class="arrow-left left" href="#">&lt;</a>
    <div class=slider>
        <ul>
            <li class="red"></li>
            <li class="black"></li>
            <li class="yellow"></li>
        </ul>
    </div>
    <a  class="arrow-right right"  href="#">&gt;</a>
</div>

我的jQuery插件

(function($) {

    var options = {
        leftBtn: '.arrow-left',
        rightBtn: '.arrow-right',
        animationSpeed: 5,
    };

    var methods = {
        init : function(options) {
            var option = $.extend({
                leftBtn: '.arrow-left',
                rightBtn: '.arrow-right',
                animationSpeed: 5
            }, options);
            var $leftArrow = $(option.leftBtn);
            var $rightArrow = $(option.leftBtn);
            $( '.arrow-left' ).bind( 'click', methods.left );
            $( '.arrow-right').bind( 'click', methods.right );
        },
        left : function() {
            var $self = $('.arrow-left');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').first();
            $first.clone().appendTo($ul);
            $ul.find('li').animate({left: "-=100"}, 800, function() {
                //$first.remove();
            });

            //$first.remove();
        },
        right : function() {
            var $self = $('.arrow-right');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').last();
            $first.clone().prependTo($ul);
            $first.remove();
        },
        destroy : function() {
            $( '.left' ).unbind( 'click', methods.left );
            $( '.right').unbind( 'click', methods.right );
        }
    };

    $.fn.mySlider = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error(method + ' doesn\'t exist for plugin jQuery.mySlider' );
        }
    };

})( jQuery );

$('.wrapper').mySlider();

http://jsfiddle.net/GmanG/hb9m42rc/1/

如何正确扩展默认选项并创建回调函数？

谢谢。

滑块循环没有隐藏元素

0 个答案: