0

それで、私が5つのdivを持っているとしましょう。最初の3つのdivを表示してから、新しいdivを表示し、設定された間隔でdivを削除しようとしています。

これが私のHTMLコードです：

<div class="speaker">One</div>
<div class="speaker">Two</div>
<div class="speaker">Three</div>
<div class="speaker">Four</div>
<div class="speaker">Five</div>

JSデモはこちらhttp://jsfiddle.net/mirzar/Sny3e/8/です。

現在のインデックスを維持しないという点で私が間違っていることについて何か考えはありますか？5番目のスピーカーが表示されたら、「スリーフォーファイブ」から「ツースリーフォー」、「ワンツースリー」の順に繰り返して、最初からやり直そうとしています。

4

3 に答える 3

2

私はあなたのフィドルをフォークし、可能な限り変更しないようにしました。旗を立てて、上向きか下向きかを確認します。インデックスを下に戻るときは、再び0に戻ったかどうかを確認します。戻った場合は、すべてのインデックス位置をデフォルトにリセットします。

各パスの条件として現在のインデックスを使用している場合、最終的には、パスと失敗の間を行き来するポイントに到達します。そのため、実行するステートメントのセットを指定するために「フラグ」変数を設定する方が適切です。

var speakers = $(".speaker").length;
var currIndex = 0;
var endIndex = 0;
var reverseIndex = 0;
var up = true;

if (speakers > 3) {
   $(".speaker").hide();
   $('.speaker:lt(3)').show();
   var refreshId = setInterval(speaker_slides, 2000);
}

function speaker_slides() {

  if (up) {
    endIndex = currIndex + 3;
    $(".speaker").eq(currIndex).hide(500);
    $(".speaker").eq(endIndex).delay(500).show(500);
    currIndex++;
    $("#currIn").empty().append(currIndex);
    up = currIndex >= 2 ? false : true;
  } else {
    currIndex--;
    endIndex = currIndex;
    reverseIndex--;
    $(".speaker").eq(reverseIndex).hide(500);
    $(".speaker").eq(endIndex).delay(500).show(500);
    if(currIndex == 0) {
      up = true;
      endIndex = 0;
      reverseIndex = 0;
    }
  }

}

これはかなりクリーンアップできますが、当初の意図どおりに機能していると思います。

それが役に立てば幸い

http://jsfiddle.net/ZjcYd/

于 2013-01-08T05:24:58.877 に答える
1

私はあなたのjsfiddleをフォークし、私の方法で変更しようとしました：

http://jsfiddle.net/dharmavir/74KQc/

$(document).ready(function(){
  var slides = $(".speaker").length;
  $.each( $(".speaker"), function(index, node) {
    $(node).data("rank", index+1);
  });
  $(".speaker").hide();
  setInterval(slideRoller, 2000);
});

function slideRoller()
{
  rollSlides("container", "slides", "speaker", 1, 5, 3);
}

function rollSlides(containerDisplay, containerParent, elmSetClass, startIndex, endIndex, displayLimit)
{
  $("#"+containerDisplay).empty();
  $.each( $("."+elmSetClass), function() {
    var rank = $(this).data("rank");

    if( rank <= displayLimit )
    {
      $(this).clone().show().appendTo("#"+containerDisplay);
    }
    else
    {
      $(this).hide().appendTo("#"+containerParent);
    }
    if( rank <= startIndex )
    {
      rank = endIndex;
    }
    else 
    {
      rank = rank - 1;
    }
    $(this).data("rank", rank);
  });
}
于 2013-01-08T05:48:47.533 に答える
0

答えはあると思いますが、より一般化されたコンパクトなソリューションに興味があるかもしれません。

  var $speakers = $(".speaker");
  var dims = {
    length: $speakers.length,
    batch: 3
  };
  var i = 0; //currIndex
  var dir = 1; //direction
  var offset = {};

  if (dims.length > dims.batch) {
    $speakers.hide();
    $('.speaker:lt(' + dims.batch + ')').show();
    var refreshId = setInterval(speaker_slides, 2000);
  }

  function speaker_slides() {
    i = i + dir;
    $("#currIn").text(i);
    offset.h = (dir == 1) ? -1 : dims.batch;
    offset.s = (dir == 1) ? dims.batch - 1 : 0;
    $speakers.eq(i + offset.h).hide(500);
    $speakers.eq(i + offset.s).delay(500).show(500);
    dir = (i <= 0) ? 1 : (i >= dims.length - dims.batch) ? -1 : dir;
  }

デモ

すべての定数はとから導出されdims.lengthますdims.batch。

動作を変えるdims.batchには、1、2、または4に変更するだけです。

于 2013-01-08T06:53:46.530 に答える