Question

我正在尝试在jQuery / JavaScript中创建滚入/滚出幻灯片。我的问题是，它需要重复。现在，当它重新开始时，图片不再来自右侧:(

我创建slideLeft函数的原因是，之后我需要创建2个函数，用户可以手动按下左或右按钮来中断幻灯片放映。

这就是我所拥有的：

<script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<div style='background: #c4c4c4; border: 1px solid #7b7b7b; height: 220px; overflow: hidden; padding: 5px; position: absolute; width: 590px;'>
  <div id='slider-image-1' style='left: 5px; background: red; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div>
  <div id='slider-image-2' style='left: 600px; background: yellow; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div>
  <div id='slider-image-3' style='left: 600px; background: green; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div>
  <div id='slider-image-4' style='left: 600px; background: blue; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div>
</div>

<script type='text/javascript'>
  $(document).ready(function() {
    var amount = 0;
    var nextamount = 1;
    setInterval(function() {
      amount++;
      nextamount++;
      if (nextamount === 5) nextamount = 1;
      if (amount === 5) amount = 1;
        slideLeft(amount, nextamount);
      }, 2000);
    });

  function slideLeft(i, j) {
    var $theItem = $('#slider-image-' + i);
    $theItem.animate({
      left: parseInt($theItem.css('left'), 10) == 5 ? -$theItem.outerWidth() : 5
    }, 500);

    var $theItem = $('#slider-image-' + j);
    $theItem.animate({
      left: parseInt($theItem.css('left'), 10) == 5 ? $theItem.outerWidth() + 10 : 5
    }, 500);

  };
</script>

Answer 1

你需要准备要进入的元素在右边。

function slideLeft(i, j) {
  var $theItem = $('#slider-image-' + i);
  $theItem.animate({
    left: parseInt($theItem.css('left'), 10) == 5 ? -$theItem.outerWidth() : 5
  }, 500);

  var $theItem = $('#slider-image-' + j);
  $theItem.css('left', '600px'); // moves in item to the right before animation
  $theItem.animate({
    left: parseInt($theItem.css('left'), 10) == 5 ? $theItem.outerWidth() + 10 : 5
  }, 500);

};

我认为你已经用你的parseInt尝试了它，但它不起作用，所以你可以摆脱它。

function slideLeft(i, j) {
  var $outItem = $('#slider-image-' + i);
  $outItem.animate({ left: -$outItem.outerWidth() }, 500);

  var $inItem = $('#slider-image-' + j);
  $inItem.css('left', '600px');
  $inItem.animate({ left: 5 }, 500);
}

Answer 2

之前我做过这样的事情，我不知道这会对你有所帮助，我做的是：在图像/幻灯片集合的末尾添加第一张幻灯片的副本。然后，当你显示最后一个＆＃34;真实＆＃34;图像，它看起来像你滚动到第一个图像（但这只是第一个图像的副本），然后当动画完成后，你可以使用默认的＆＃34;左＆＃34; css值。如果您希望它双向滚动，您可以使用第一张图像之前的最后一张图像/幻灯片的副本执行相同操作，但是您必须使用偏移量启动滑块。

它有点难以解释，你明白了吗？：）

在jQuery中进行滚入/滚出幻灯片放映

2 个答案: