Question

我通过阅读和收集教程中的信息制作了一个简单的滑块。它在这里：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();
              });
    };

如果您有任何问题，请与我们联系。

为缩略图滑块添加淡入淡出效果或预加载li元素

1 个答案: