Добавить прокрутки анимации в список в JQuery

Question

У меня есть список, в котором, если вы нажмете пред следующий он уходит влево и вправо, как показано на this fiddle

HTML

<div> 
    <span id="prev">prev</span> 
     <ul id="scrolllist"> 
      <li><img src="http://dummyimage.com/100x100/000000/fff"></li> 
      <li><img src="http://dummyimage.com/100x100/f33636/fff"></li> 
      <li><img src="http://dummyimage.com/100x100/0c5b9e/fff"></li> 
      <li><img src="http://dummyimage.com/100x100/0c9e0c/fff"></li> 
     </ul> 
    <span id="next">next</span> 
    </div> 

CSS

div { 
     float: left; 
     width: 550px; 
    } 
    li { 
     float: left; 
     list-style-type: none; 
     margin: 0 5px; 
    } 
    #prev { 
     cursor: pointer; 
     float: left; 
    } 
    #next { 
     cursor: pointer; 
     float: right; 
    } 

JS

$(function() { 
     $('#prev').click(function() { 
      var first = $('#scrolllist li:first-child'); 
      $('#scrolllist li').parent().append(first).animate({ "left": "-=50px" }, "slow"); 
     }); 
     $('#next').click(function() { 
      var last = $('#scrolllist li:last'); 
      $('#scrolllist li').parent().prepend(last).animate({ "left": "+=50px" }, "slow"); 
     }); 
    }); 

Это работает перемещают их через, как и ожидались, однако я хочу, чтобы прокрутить элементы списка через, чтобы получить аффект их идущими в щелкнутом направлении подобно тому, что можно увидеть в http://coolcarousels.frebsite.nl/c/58/

Что мне нужно сделать, чтобы это работало?

Answer 1

Хитрость в том, чтобы сделать это правильно, - это поместить изображения в скрытый контейнер div, а затем подделать этот контейнер слева или справа по мере необходимости, клонируя первый или последний img в списке, а затем добавляя или добавляя в зависимости от направление.

Контейнер div img должен быть размещен внутри другого div с явной высотой и шириной с переполнением, установленным в скрытое. Это предотвращает видимость широкого контейнера img для пользователя.

Вот HTML:

<div> 
<span id="prev">prev</span> 
<div class="scroll-container"> 
    <div class="img-container"> 
     <img src="http://dummyimage.com/100x100/000000/fff"> 
     <img src="http://dummyimage.com/100x100/f33636/fff"> 
     <img src="http://dummyimage.com/100x100/0c5b9e/fff"> 
     <img src="http://dummyimage.com/100x100/0c9e0c/fff"> 
    </div> 
</div> 
<span id="next">next</span> 

И JavaScript:

$(function() { 
$('#prev').click(function() { 
    if(!$('.img-container').is(':animated')) { 
     var first = $('.img-container img:first-child'); 
     var firstClone = first.clone(); 
     $('.img-container').append(firstClone); 
     $('.img-container').animate({ "left": "-=110px" }, "slow", function() { 
      first.remove(); 
      $('.img-container').css("left", "0"); 
     }); 
    } 
}); 
$('#next').click(function() { 
    if(!$('.img-container').is(':animated')) { 
     var last = $('.img-container img:last-child'); 
     var lastClone = last.clone(); 
     $('.img-container').css("left", "-110px"); 
     $('.img-container').prepend(lastClone); 
     $('.img-container').animate({ "left": "0" }, "slow", function() { 
      last.remove(); 
     }); 
    } 
}); 
}); 

Обратите внимание на 'если не анимированный' проверить в начале каждой функции. Это предотвращает запуск пользователем функций до завершения анимации (что может вызвать странные ошибки).

Вот модифицированная версия вашей скрипки: http://jsfiddle.net/fJqKV/17/