Question

我正在尝试做一种多元素轮播：

我实现了左右移动，但是我在使用auto时遇到了问题：

function addCarouselListener() {
            data.forEach(function (carousel) {
                carousel.previous.addEventListener('click', moveLeft);
                carousel.next.addEventListener('click', moveRight);
            });
        }


        function autoslide() {
            var max =10, visible=6, count=visible;
            max = 10

            while (count < max) {
              moveRight();
                count +=1;
            }

           if (count=max)  // go back
            while(count > visible) { 
            moveLeft( )
            count -=1;

}

首先，这并非总是可以正常工作，我需要一直工作并有一个计时器。其次，如果用户单击左，右（上一个/下一个），我需要暂停。

请不要向我发送指向已经完成的脚本的链接，因为我想理解，而且我还需要更多自定义内容。

Answer 1

我可以清楚地告诉您，这行代码无法正常运行：

if (count = max)

要比较两个变量之间的相等性，如果您还想比较它们的类型，则必须使用==或===。

如果您只是这样操作，则滑块将循环得如此之快，以至于浏览器可能会崩溃。

您要使用setInterval()

这是一个未经测试的简单示例：

var direction = 'right'
var current_position = 0
var max = 10
var delay = 500
var timer = false

function move_slider(){
    if(direction == 'right')
        current_position += 1
    if(direction == 'left')
        current_position -= 1

    // move the slider
}

function auto_slide(){
    console.log(current_position, direction)
    move_slider()

    if(current_position <= 0)
        direction = 'right'
    if(current_position >= max)
        direction = 'left'
}

function set_auto_mode(){
  timer = window.setInterval(auto_slide, delay) 
}

function unset_auto_mode(){
  window.clearInterval(timer)
  timer = false
}

创建具有自动移动功能的轮播-一直在使用时间/暂停的问题

1 个答案: