Question

我在幻灯片放映的顶部放置了一个进度条，该进度条使用jquery bootstrap轮播对象版本4.5.0滑动图像。我要实现的是将自定义javascript函数绑定到interval，该函数显示幻灯片将移至下一张图像之前的时间。问题是我正在努力了解如何将外部函数绑定到轮播对象中的interval方法。


    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="5000">
         <!-- Progress bar -->
         <div class="progress">
             <div id="progression" class="progress-bar bg-secondary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                   <span class="sr-only"></span>
             </div>
         </div>
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
             <div class="carousel-item active">
                   <img class="d-block w-100" src="../images/image1.jpg">
                  <div class="block-caption display-topmiddle">"image one"</div>
             </div>
             <div class="carousel-item">
                   <img class="d-block w-100" src="../images/image2.jpg">
                  <div class="block-caption display-topmiddle">"image two"</div>
             </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            var i = 0;
            function move(tme) {
            if (i == 0) {
                i = 1;
                var elem = document.getElementById("progression");
                var width = 1;
                var id = setInterval(frame, tme);
                function frame() {
                if (width >= 100) {
                    clearInterval(id);
                    i = 0;
                    elem.style.width = "0";
                } else {
                    width++;
                    elem.style.width = width + "%";
                }
                }
            }
            }
            var strt = $('#carousel').find('.active').attr('data-interval');
            $('#carousel').carousel({
                interval: 5000,
                cycle: true
            });
            move(strt);
        });
    </script>

编辑
因此，我在引导文件中注意到，必须以某种方式访问Carousel对象的每个this._config._interval方法调用中的nextWhenvisible。所以我做了一些重写：

$.fn.carousel.Constructor.prototype.cycle = function (event) {
    if (!event) {
        this._isPaused = false;
    }

    if (this._interval) {
        clearInterval(this._interval)
        this._interval = null;
    }

    if (this._config.interval && !this._isPaused) {
                var i = 0;
            function move(tme) {
                console.log(tme);
                if (i == 0) {
                    i = 1;
                    var elem = document.getElementById("progression");
                    var width = 1;
                    var id = setInterval(frame, tme);
                    function frame() {
                    if (width >= 100) {
                        clearInterval(id);
                        i = 0;
                        elem.style.width = "0";
                    } else {
                        width++;
                        elem.style.width = width + "%";
                    }
                    }
                }
            }
            move(this._config.interval);
            this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval);
        }
};

由于出现以下错误ReferenceError: move is not defined，移动功能似乎无法被识别。
请问有人可以协助如何使移动功能调用更流畅吗？

向jQuery轮播添加功能，指示间隔时间

0 个答案: