jQuery滑块作为时间轴

Question

我刚刚完成了一个带有jQuery Slider的jQuery手风琴。 即。

显示3张照片。用户可以使用PREV或NEXT按钮查看下一个/上一个3图像。他们还可以使用滑块浏览所有图像。

下一步是使此滑块看起来像时间轴。左侧需要从1970年开始并在2010年结束。对于每个项目（在这种情况下，项目是一组3个图像）我需要它在时间线上显示日期。

即：

我知道我可以创建一个图像，其中的日期与正确的宽度相隔但理想情况下这需要是动态的，因此可以放入更多项目并且时间线自我更新。

Answer 1

在较高的水平，以下应该有效：

1. 获取滑块UI元素的总宽度（以像素为单位）。
2. 将此数字除以[total number of labels] - 1，以获得分配给每个标签的总像素数。
3. 在滑块div后面添加一系列div，其宽度与步骤2中的宽度和float:left样式相同。
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);
}