Собственный плагин слайдер/карусель
Есть 3 элемента на странице (ul li), необходимо при нажатии стрелки влево левый элемент анимированно уходит влево, в это же время он появляется с правой стороны, тоже анимированно. Просто ротацию элементов получилось сделать, а вот чтобы оно работало анимированно не получается.
Если жать влево приблизительно то что надо сделано, но есть проблемы которые не знаю как решить, если в право то работает как предполагалось, но нету анимированния. <div class="wrapper"> <a class="arrow-left left" href="#"><</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="#">></a> </div> (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/ Спасибо. |
UserQ,
вариант ... <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <style type='text/css'> .wrapper { width: 370px; height: 120px; border: 1px solid; position: relative; margin: 50px auto; } .wrapper ul:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } .wrapper ul { position: relative; left: 0; padding: 0; width: 600px; } .wrapper ul li { float: left; width: 90px; margin-right: 10px; height: 90px; list-style-type: none; overflow: hidden; } .red { background-color: red; } .slider { overflow: hidden; /* display: inline */ float: left; width: 83%; } .black { background-color: black; } .yellow { background-color: yellow; } .wrapper a { width: 20px; height: 20px; margin-top: 45px; text-decoration: none; } .left { margin-right: 10px; margin-left: 10px; float: left; } .right { right: 5px; float: right; } body { margin: 0 auto; } </style> <script> $(window).load(function(){ (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(event) { event.preventDefault(); var $self = $('.arrow-left'); var $parent = $self.closest('.wrapper'); var $ul = $parent.find('ul'); var $first = $ul.find('li').first(); $first.clone().appendTo($ul); $first.animate({width: 0, 'margin-left' : '-10px'}, 800, function() { $first.remove(); }); }, right : function(event) { event.preventDefault(); var $self = $('.arrow-right'); var $parent = $self.closest('.wrapper'); var $ul = $parent.find('ul'); var $first = $ul.find('li').last(); var clone = $first.clone().prependTo($ul); $first.animate({width: 0}, 800, function() { $first.remove(); }); clone.css({width: 0}).animate({width: '90px'}, 800) }, destroy : function() { $( '.arrow-left' ).unbind( 'click', methods.left ); $( '.arrow-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(); }); </script> </head> <body> <div class="wrapper"> <a class="arrow-left left" href="#"><</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="#">></a> </div> </body> </html> |
Да хороший вариант, я тоже его уже попробовал.
Спасибо. |
Часовой пояс GMT +3, время: 10:51. |