3

jQuery アコーディオンと jQuery Slider の組み込みが完了しました。いえ

3枚の写真が表示されます。PREVまたはボタンを使用NEXTして、次/前の 3 つの画像を表示できます。また、スライダーを使用してすべての画像をナビゲートすることもできます。

次のステップは、このスライダーをタイムラインのように見せることです。左側は 1970 年に開始し、2010 年に終了する必要があります。各アイテム (この場合、アイテムは 3 つの画像のセットです) について、タイムラインに日付を表​​示する必要があります。

すなわち:代替テキスト

日付が適切な幅で離れた画像を作成できることはわかっていますが、理想的にはこれを動的にする必要があるため、より多くのアイテムを入れてタイムラインを自己更新できます。

4

1 に答える 1

4

大まかに言えば、次のように動作するはずです。

  1. スライダー UI 要素の合計幅をピクセル単位で取得します。
  2. この数値を で割る[total number of labels] - 1と、各ラベルに割り当てるピクセルの総数が得られます。
  3. float:leftステップ 2 で取得した幅とスタイルを使用して、スライダー div の直後に一連の div を追加します。
  4. clear: bothスタイルの空の div ですべてに従います。

以下に基本的な例を示します。

CSS 

.timeline {
    width: 500px;
    border: 1px solid black;
}
.timelineEntry {
    float: left;
}
.first {
    position: relative; left: 5px;
}
.last {
    position: relative; left: -10px;
}
.clear {
    clear: both;
}

マークアップ 

<div id="timelineContainer">
    <div class="timeline" id="slider">
        Slider UI Goes Here
    </div>
</div>
<div class="clear"></div>

JavaScript

var container = document.getElementById("timelineContainer");
var labels = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var totalWidth = $("#slider").width();
var labelWidth = Math.floor(totalWidth / (labels.length - 1));
for (var index = 0; index < labels.length; index++) {
    var nextLabel = document.createElement("div");
    nextLabel.className = "timelineEntry";
    if (index == 0) {
        nextLabel.className += " first";
    }
    else if (index == labels.length - 1) {
        nextLabel.className += " last";
    }
    nextLabel.style.width = labelWidth + "px";
    nextLabel.innerHTML = labels[index];
    container.appendChild(nextLabel);
}
于 2011-03-27T03:41:56.230 に答える