0

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>
4

2 に答える 2

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);
}
于 2012-06-01T23:26:35.770 に答える
0

私は以前にこのようなものを作成しましたが、これがあなたに役立つかどうかはわかりません。私がしたことは、画像/スライドのコレクションの最後に最初のスライドのコピーを追加することでした。次に、最後の「実際の」画像を表示していて、最初の画像にスクロールしているように見える場合（ただし、これは最初の画像のコピーにすぎません）、アニメーションが完了したら、デフォルトの「左」css値。双方向にスクロールしたい場合は、最初の画像の前にある最後の画像/スライドのコピーでも同じことができますが、スライダーをオフセットで開始する必要があります。

説明するのは少し難しいですが、要点はわかりますか？:)

于 2012-06-01T22:47:32.127 に答える