Question

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

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

由于

Answer 1

请按照以下两个步骤进行操作

将静态元素添加到'slides'容器作为progress元素。

<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

如何在jssor滑块中添加进度条（就像旋转滑块中的那个）？

1 个答案: