Question

我正在尝试使用setInterval为滑块创建自动幻灯片。当只有一个滑块时，它就像一个魅力。

当有2个滑块时，第一个滑块不起作用，第二个滑块将滑动得更快，因为将有2个setInterval并且两个滑块都滑动第二个滑块。无论如何要确保每个setInterval都滑动自己的滑块？

var autoSlideTimer = 5;
var autoslide = setInterval(function () {

    if (autoSlideTimer == 0) {
        var slideMargin = offsetMarginLeft - width;

        if (-slideMargin == (width * totalImages)) {
            offsetMarginLeft = width;
            displayImage = 0;
        }

        slider.style.marginLeft = (offsetMarginLeft - width) + 'px';
        displayImage += 1;
        pagination = element.getElementsByTagName('ul')[0];
        pagination.innerHTML = paginate;
        pagination.getElementsByTagName('li')[displayImage - 1].setAttribute("class", "displayed");

        slider = element.getElementsByTagName('div')[0];

        offsetMarginLeft = parseInt(slider.style.marginLeft.replace('px', ''));

        autoSlideTimer = 5;
    } else {
        autoSlideTimer--;
    }
}, 1000);

感谢

Answer 1

我用另一种方式解决这个问题，虽然有效，但似乎并不是完美的方式

        var event = new Event('build');

        // Listen for the event.
        element.addEventListener('build', function (e) {

            function timeoutLoop()
            {
                setTimeout(function(){
                    if(autoSlideTimer == 0)
                    {
                        var slideMargin = offsetMarginLeft - width;

                        if(-slideMargin == (width * totalImages))
                        {
                            offsetMarginLeft = width;
                            displayImage = 0;
                        }

                        slider.style.marginLeft = (offsetMarginLeft - width) + 'px';
                        displayImage += 1;
                        pagination = element.getElementsByTagName('ul')[0];
                        pagination.innerHTML = paginate;
                        pagination.getElementsByTagName('li')[displayImage - 1].setAttribute("class", "displayed");


                        offsetMarginLeft = parseInt(slider.style.marginLeft.replace('px', ''));

                        autoSlideTimer = 5;
                    }else
                    {
                        autoSlideTimer--;
                    }
                    timeoutLoop();
                },1000);
            }
            timeoutLoop();
        }, false);

        // Dispatch the event.
        element.dispatchEvent(event);

首先，我在里面使用了setInterval，但滑块将被覆盖。但是setTimeout没问题。

Javascript - 同一页面上2个自动幻灯片的setInterval

1 个答案: