代码之家 › 专栏 › 技术社区 › Adam Tomat

jQuery滑块作为时间线

timeline slider jquery

3

Adam Tomat · 技术社区 · 14 年前

我刚刚完成了jQuery accordian和jQuery滑块的合并。即。

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

即: alt text

我知道我可以创建一个与日期的正确宽度分开的图像,但理想的情况下,这需要是动态的,这样更多的项目可以放入和时间线自我更新。

1 回复 | 直到 13 年前

1

4

aroth 13 年前

在较高的层面上,应采取以下措施:

把这个数除以 [total number of labels] - 1 获取要分配给每个标签的像素总数。
float:left
用空的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;
}

标记

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

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