0

Respondslides.js でスラ​​イダーを作成しました。5 種類の画像スライドが含まれています。

通常、たとえば 4000 ミリ秒のタイムアウトを割り当てることができますが、それはスライダーのすべての画像に割り当てられます。

各画像スライドに異なるタイムアウトを割り当てたいと思います。例えば：

slide 1: timeout = 10000
slide 2: timeout = 2000
slide 3: timeout = 4000
slide 4: timeout = 4000
slide 5: timeout = 2000

どうすればそれを入手できますか? 出来ますか？助けてくれてありがとう、そして私の下手な英語でごめんなさい。

Timctran の提案どおりにコードを編集しましたが、何か問題がありました。このコードの問題点を特定するのを手伝ってくれませんか?

ご指摘のとおり、コードを変更してみました。JavaScriptコードの経験がないので、何か間違ったことをして、スライダーが機能しなくなったので、古いバージョンに戻しました。コードを変更した方法は次のとおりです。

 // Array to enter timeout values.
        var desiredTimeouts = [10000, 2000, 4000, 4000, 2000];
    // Auto cycle
    if (settings.auto) {
        startCycle = function (i) {
            rotate = setTimeout(function () {
          // Clear the event queue
          $slide.stop(true, true);

          var idx = index + 1 < length ? index + 1 : 0;

          // Remove active state and set new if pager is set
          if (settings.pager || settings.manualControls) {
            selectTab(idx);
          }

          slideTo(idx);
        startCycle(index);
    }, desiredTimeout[i]);
};

      // Init cycle
      startCycle(index);
    }

    // Restarting cycle
    restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearTimeout(rotate);
        // Restart
        startCycle(index);
      }
    };

コードを修正する際の助けをいただければ幸いです。ありがとう！

4

2 に答える 2

1

responsiveslides.js呼び出される関数がありますrotate(232 行目)。コードのその部分で、ここに表示されている変更を行います。

// Array to enter timeout values.
var desiredTimeouts = [10000, 2000, 4000, 4000, 2000];
// Auto cycle
if (settings.auto) {
  startCycle = function (i) {
    rotate = setTimeout(function () {
      // Clear the event queue
      ...
      slideTo(idx);
      startCycle(index);
    }, desiredTimeout[i]);
  };
  // Init cycle
  startCycle(index);
}
...
     clearTimeout(rotate);
     startCycle(index);
...
     clearTimeout(rotate);

スクリプトに加えられた変更の概要:

  1. を含む行を追加しますdesiredTimeouts。
  2. setIntervalに変更setTimeout。
  3. startCycle関数の最後にへの呼び出しを追加します。
  4. の 2 つのインスタンスを に変更clearIntervalしましたclearTimeout
  5. への引数indexとして呼び出されますstartCycle。
于 2014-10-01T13:21:20.167 に答える
0

Timctran のおかげで、最終的な解決策が得られました。

responsiveslides.js ファイルを開き、227 行目 (responsiveslides.js バージョン 1.54) に移動します。

以下のコードで既存のコードを修正します。必要なタイムアウトをコンマで区切って var desiredTimeout に挿入します。

// Array to enter timeout values.
        var desiredTimeout = [10000, 4500, 4500, 4500];

    // Auto cycle
    if (settings.auto) {
        startCycle = function (i) {
            rotate = setTimeout(function () {
                // Clear the event queue
                $slide.stop(true, true);

                var idx = index + 1 < length ? index + 1 : 0;

                // Remove active state and set new if pager is set
                if (settings.pager || settings.manualControls) {
                    selectTab(idx);
                }

          slideTo(idx);
          startCycle(index);
          }, desiredTimeout[i]);
        };

      // Init cycle
      startCycle(index);
    }

    // Restarting cycle
    restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearTimeout(rotate);
        // Restart
        startCycle(index);
      }
    };

    // Pause on hover
    if (settings.pause) {
      $this.hover(function () {
        clearTimeout(rotate);
      }, function () {
        restartCycle();
      });
    }
于 2014-10-07T09:43:15.947 に答える