Клонирование элементов li в JQuery - PullRequest
Новая
       13

Клонирование элементов li в JQuery

0 голосов
/ 14 октября 2010

Я использую EasySlider, но в отличие от любого другого примера этого плагина, который я обнаружил, я показываю несколько элементов одновременно, а ширина составляет 100%. Отдельные изображения составляют полное, длинное последовательное изображение, которое является Photoshopped, поэтому даже граница между первым и последним выглядит естественной. Он автоматически настроен на непрерывное скольжение.

В плагине есть этот код: 

if(options.continuous){
    $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
    $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    $("ul", obj).css('width',(s+1)*w);
};

Моя проблема заключается в том, что после первого клонируется только первый элемент, поэтому при втором повороте этого ползунка отображается только первый элемент, пока он не окажется в крайнем левом положении, тогда другие изображения выглядят как «всплывающие». "дюйма (аналогично: [ ПРИМЕР ], если вы представляете, что все изображения справа от ярмарочной площади не появляются, пока ярмарочная площадь не окажется в крайней левой).

Есть ли лучший способ управлять этим клонированием элементов, чтобы ВСЕ изображения были клонированы? или, может быть, кто-то может придумать лучший способ? Я новичок в JQuery

ПРИМЕЧАНИЕ. Я пытаюсь создать операцию, в результате которой, когда элемент покидает экран слева, он помещается обратно вправо. Есть ли способ в конечном итоге достичь этого?

Ответы [ 4 ]

2 голосов
/ 22 октября 2010

Я думаю, вы можете рассмотреть другой плагин. Если вы измените плагин, обновление потребует повторного применения ваших патчей.

Я бы порекомендовал http://www.gmarwaha.com/jquery/jcarousellite/ или же http://sorgalla.com/jcarousel/

Они оба поддерживают то, о чем вы говорите.

1 голос
/ 22 октября 2010

Учитывая, что у вас есть список элементов в скроллере, например: 

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

И при условии, что каждый раз, когда вы продвигаете скроллер, первый li сходит с экрана, вы можете непрерывно собиратьпервый li в начале списка и добавление его в конец при каждом нажатии кнопки «Далее» или события прокрутки.Если вы используете jQuery> = 1.4, вы можете сделать это с помощью метода detach () , который удалит элемент из DOM, но сохранит все связанные с ним данные, чтобы вы могли легко подключить его позже:

$('ul li:first').detach().appendTo('ul');
1 голос
/ 22 октября 2010

Я согласен с troynt, в этом случае было бы лучше использовать то, что соответствует вашим требованиям.

Я только что сделал простой "плагин", который делает только то, что вам нужно, может быть, это полезно для вас.

http://jsfiddle.net/doktormolle/4c5tt/

Вы можете настроить задержку и продолжительность и выбрать паузу при наведении.

0 голосов
/ 14 октября 2010

Не знаю, если я правильно понимаю, вы можете попробовать это: 

  //at first run add a class "init" to the inital li-elements,
  //so that later only them will be cloned 
if(!$('ul li.init',obj).length)$('ul li',obj).addClass('init');

  //prepend clones of all li-elements with init-class and remove their init-class
$("ul", obj).prepend($("ul li.init", obj).clone().removeClass('init').css({}));
...