如何在 jssor 滑块中添加进度条（就像革命滑块中的那个）？答案

【问题标题】：How to add a progress bar in jssor slider (just like the one in revolution slider)?如何在 jssor 滑块中添加进度条（就像革命滑块中的那个）？
【发布时间】：2014-09-10 23:28:13
【问题描述】：

您好，我正在使用 Jssor Slider（使用 jQuery）在我的网站上构建一个滑块。

我在旋转滑块上看到了一个进度条（计时器条）。这里的例子 - http://htmlstream.com/preview/unify-v1.5/page_home2.html

谢谢

【问题讨论】：

标签： jquery slider progress-bar jssor

【解决方案1】：

请按照以下2个步骤，

将静态元素添加到“幻灯片”容器中作为进度元素。

<div u="slides" ...>
    ... 
    <div id="progress-element" u="progress" style="position: absolute; left: 0; bottom: 0; width: 0%; height: 5px; background-color: rgba(255,255,255,0.5); z-index: 100;"></div>
</div>

在 $JssorSlider$.$EVT_PROGRESS_CHANGE 事件触发时更新进度。

    var progressElement = document.getElementById("progress-element");

    function UpdateProgress(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) {
        if (progressEnd > 0) {
            var progressPercent = progress / progressEnd * 100 + "%";
            progressElement.style.width = progressPercent;
        }
    }

    jssor_slider1.$On($JssorSlider$.$EVT_PROGRESS_CHANGE, UpdateProgress);

参考：Slider with Progress Bar Example

【讨论】：