Javascript 将转盘设置为自动滑动

我有一个简单的旋转木马

我想让它自动滑动，而不必点击箭头

演示：

carousel=（函数（）{
//从DOM中读取必要的元素一次
var-box=document.querySelector（'.carouselbox'）；
var next=box.querySelector（'.next'）；
var prev=box.querySelector（'.prev'）；
//定义全局计数器、项目和
//当前项目
var计数器=0；
var items=box.querySelectorAll（'.content li'）；
var金额=项目长度；
var电流=项目[0]；
box.classList.add（'active'）；
//通过旋转木马导航
功能导航（方向）{
//隐藏旧的当前列表项
current.classList.remove（'current'）；
//计算新位置
计数器=计数器+方向；
//如果选择了上一个
//并且计数器小于0
//使计数器成为最后一个元素，
//这样循环传送带
如果（方向===-1&&
计数器<0{
计数器=金额-1；
}
//如果单击“下一步”按钮并显示
//如果没有items元素，请设置计数器
//到0
如果（方向===1&&
！项目[计数器]{
计数器=0；
}
//设置新的当前元素
//并添加CSS类
当前=项目[计数器]；
current.classList.add（'current'）；
}
//向按钮添加事件处理程序
next.addEventListener（'click'，函数（ev）{
导航（1）；
});
上一个addEventListener（'click'，函数（ev）{
导航（-1）；
});
//显示第一个元素
//（当方向为0时，计数器不变）
导航（0）；
})();
.carouselbox{
字体系列：helvetica，无衬线；
字体大小：14px；
宽度：100px；
位置：相对位置；
边缘：1米；
边框：1px实心#ccc；
盒形阴影：2×2×10px#ccc；
溢出：隐藏；
}
.内容{
保证金：0；
填充：0；
}
李先生{
字体大小：100px；
保证金：0；
填充：0；
宽度：100%；
列表样式：无；
文本对齐：居中；
z指数：2；
}
.主动{
高度：130像素；
}
.转盘盒按钮{
边界：无；
可见性：隐藏；
}
.活动按钮{
能见度：可见；
} 
.银幕外{
位置：绝对位置；
左：-2000px；
}
.激活。按钮{
填充：5px0；
背景：#eee；
文本对齐：居中；
z指数：10；
位置：相对位置；
}
李先生{
位置：绝对位置；
顶部：130像素；
不透明度：0；
变换：比例（0）；
过渡：1s；
}
.主动力{
顶部：30px；
不透明度：1；
变换：比例（1）；
过渡：1s；
}

◀ 以前的
下一个▶ 
一,
二,
三,
四,
您需要使用
setInterval
。将其另存为变量，然后如果希望自动停止，可以稍后清除它

例如：

var carousel=（函数（）{
//从DOM中读取必要的元素一次
var-box=document.querySelector（'.carouselbox'）；
var next=box.querySelector（'.next'）；
var prev=box.querySelector（'.prev'）；
//定义全局计数器、项目和
//当前项目
var计数器=0；
var items=box.querySelectorAll（'.content li'）；
var金额=项目长度；
var电流=项目[0]；
box.classList.add（'active'）；
//通过旋转木马导航
功能导航（方向）{
//隐藏旧的当前列表项
current.classList.remove（'current'）；
//计算新位置
计数器=计数器+方向；
//如果选择了上一个
//并且计数器小于0
//使计数器成为最后一个元素，
//这样循环传送带
如果（方向===-1&&
计数器<0{
计数器=金额-1；
}
//如果单击“下一步”按钮并显示
//如果没有items元素，请设置计数器
//到0
如果（方向===1&&
！项目[计数器]{
计数器=0；
}
//设置新的当前元素
//并添加CSS类
当前=项目[计数器]；
current.classList.add（'current'）；
}
//向按钮添加事件处理程序
next.addEventListener（'click'，函数（ev）{
导航（1）；
});
上一个addEventListener（'click'，函数（ev）{
导航（-1）；
});
//显示第一个元素
//（当方向为0时，计数器不变）
导航（0）；
var interval=setInterval（函数（）{navigate（1）}，1000）；
})();
您需要使用
setInterval
。将其另存为变量，然后如果希望自动停止，可以稍后清除它

例如：

var carousel=（函数（）{
//从DOM中读取必要的元素一次
var-box=document.querySelector（'.carouselbox'）；
var next=box.querySelector（'.next'）；
var prev=box.querySelector（'.prev'）；
//定义全局计数器、项目和
//当前项目
var计数器=0；
var items=box.querySelectorAll（'.content li'）；
var金额=项目长度；
var电流=项目[0]；
box.classList.add（'active'）；
//通过旋转木马导航
功能导航（方向）{
//隐藏旧的当前列表项
current.classList.remove（'current'）；
//计算新位置
计数器=计数器+方向；
//如果选择了上一个
//并且计数器小于0
//使计数器成为最后一个元素，
//这样循环传送带
如果（方向===-1&&
计数器<0{
计数器=金额-1；
}
//如果单击“下一步”按钮并显示
//如果没有items元素，请设置计数器
//到0
如果（方向===1&&
！项目[计数器]{
计数器=0；
}
//设置新的当前元素
//并添加CSS类
当前=项目[计数器]；
current.classList
var carousel = (function(){

  // Read necessary elements from the DOM once
  var box = document.querySelector('.carouselbox');
  var next = box.querySelector('.next');
  var prev = box.querySelector('.prev');

  // Define the global counter, the items and the 
  // current item 
  var counter = 0;
  var items = box.querySelectorAll('.content li');
  var amount = items.length;
  var current = items[0];

  box.classList.add('active');

  // navigate through the carousel

  function navigate(direction) {

    // hide the old current list item 
    current.classList.remove('current');

    // calculate th new position
    counter = counter + direction;

    // if the previous one was chosen
    // and the counter is less than 0 
    // make the counter the last element,
    // thus looping the carousel
    if (direction === -1 && 
        counter < 0) { 
      counter = amount - 1; 
    }

    // if the next button was clicked and there 
    // is no items element, set the counter 
    // to 0
    if (direction === 1 && 
        !items[counter]) { 
      counter = 0;
    }

    // set new current element 
    // and add CSS class
    current = items[counter];
    current.classList.add('current');
  }

  // add event handlers to buttons
  next.addEventListener('click', function(ev) {
    navigate(1);
  });
  prev.addEventListener('click', function(ev) {
    navigate(-1);
  });

  // show the first element 
  // (when direction is 0 counter doesn't change)
  navigate(0);

    var interval = setInterval(function () { navigate(1) }, 1000);
})();