自动滑动水平滑块也可以在单击时滑动

Question

演示 Horizontal slider 通过更改属性 checked="checked" 在单击时滑动。

但我希望滑块在间隔 2000 毫秒后自动滑动可以使用一些 javaScript/jQuery 来完成。

下面是我正在使用的 jQuery 代码，但它不起作用：

$(document).ready(function() {
  $(".slider li:first-child").attr("checked");
  setTimeout(autoSlide, 2000);
});

function autoSlide() {
  var next = $("input").attr("checked").next();
  if (next.length) {
    input.removeAttr("checked");
    input.attr("checked", checked);
  } else {
    $('.slider li:first-child').attr("checked");
    setTimeout(autoSlide, 1000);
  }
}

请直接获取水平滑块 - jsfiddle 自动滑动。

Answer 1

$(document).ready(function(){
  var $next=$(".slider input:first").next();

  setTimeout(autoSlide, 2000);

  function autoSlide(){
   $next.trigger('click');
   if ($next.is(':last-child')) $next=$("input:first");
   else $next=$next.next();
   setTimeout(autoSlide, 2000);
  }
});

来自你的fiddle：https://jsfiddle.net/s5agwu9t/

自动滑动水平滑块也可以在单击时滑动

Auto Sliding Horizontal Slider that slide on click as well

javascript

jquery

css-transitions

css-transforms

css-animations