javascript - 为缩略图 slider 添加淡入淡出效果或预加载 li 元素

Question

我通过阅读和收集教程中的信息制作了一个简单的 slider 。 它在这里:http://codepen.io/thecuriousenggr/pen/KLbkj

但是当我向左(或向右)导航时，从左侧消失并出现在右侧的元素仅在幻灯片动画结束后显示。

有没有办法先加载它(保持它不可见)，然后将它滑过，这样它就不会在动画之后闪烁，而是在动画发生之前出现。

基本上我正在寻找这个 - 1)我点击右键 2) 在第一个 li 元素向左移动之前，它将被复制或复制到最右手边。 3)动画将发生。 4) 新的复制的保留下来，旧的被删除。

这是我的方法。但任何其他方法也可以。帮助:)

Answer 1

我让你的代码正常工作 :)

http://codepen.io/anon/pen/AmIiz

我改变的是这个:

var slideWidth = $('#slider ul li').outerWidth(true);

还有这些:

function moveLeft() {
      $('#slider ul').width(slideWidth*(slideCount+1))
            $('#slider ul li:last-child').clone().prependTo('#slider ul');
            $('#slider ul').css('left', - slideWidth).animate({'left': 0}, 333, function() {
             $('#slider ul').width(slideWidth*slideCount).css('left','');
            $('#slider ul li:last-child').remove();
              });

    };

    function moveRight() {
      $('#slider ul').width(slideWidth*(slideCount+1))
            $('#slider ul li:first-child').clone().appendTo('#slider ul');
            $('#slider ul').animate({'left': - slideWidth}, 333, function() {
              $('#slider ul').width(slideWidth*slideCount).css('left','');
      $('#slider ul li:first-child').remove();
              });
    };

如果您有任何问题，请告诉我。