powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Собственный плагин слайдер/карусель
1 сообщений из 1, страница 1 из 1
Собственный плагин слайдер/карусель
    #38862978
UserQ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Есть 3 элемента на странице (ul li), необходимо при нажатии стрелки влево левый элемент анимированно уходит влево, в это же время он появляется с правой стороны, тоже анимированно. Просто ротацию элементов получилось сделать, а вот чтобы оно работало анимированно не получается.
Если жать влево приблизительно то что надо сделано, но есть проблемы которые не знаю как решить, если в право то работает как предполагалось, но нету анимированния.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<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>



Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
(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 / 0
1 сообщений из 1, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Собственный плагин слайдер/карусель
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]