jQuery滑块作为时间轴

我刚刚完成了一个带有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. 用一个空的div跟随一切clear: both风格。

这是一个基本的例子：

CSS

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

标记

 
 
 Slider UI Goes Here 
 
 
 

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); }