如何在 div 内容滑块 jquery 上设置自动播放

Question

我不喜欢Jquery，这里有情况；

如何在此滑动轮播中自动播放？

旋转木马将 "current" class 添加到显示在顶部的 li，而非 "current" 的 li 被隐藏；

我拍的原剧本from here.

关注代码

function slide() {
  var li = $("ul#latest-news-slider li.active");

  if (li.next().length > 0) {
    li.removeClass("active", 3000, "easeInBack");
    li.next().addClass("active", 3000, "easeInBack");
  } else if (li.prev().length > 0) {
    li.removeClass("active", 3000, "easeInBack");
    $("ul#latest-news-slider li")
      .first("li")
      .addClass("active", 3000, "easeInBack");
  } else {
    return;
  }
}

$(".next").click(function() {
  var li = $("ul#latest-news-slider li.active");

  if (li.next().length > 0) {
    li.removeClass("active", 100, "easeInBack");
    li.next().addClass("active", 100, "easeInBack");
  } else {
    li.removeClass("active", 100, "easeInBack");
    $("ul#latest-news-slider li")
      .first("li")
      .addClass("active", 100, "easeInBack");
  }
});

$(".prev").click(function() {
  var li = $("ul#latest-news-slider li.active");

  if (li.prev().length > 0 && li.prev().is("li")) {
    li.removeClass("active", 100, "easeInBack");
    li.prev().addClass("active", 100, "easeInBack");
  } else {
  }
});

非常感谢

Answer 1

不确定您是如何实现的，但您可以使用 setInterval。

var interval;

$("#start").on("click", function(){
  StartThis(1000);
});

$("#stop").on("click", function(){
  StopThis(1000);
});

// speed in miliseconds (1s)
function StartThis(speed){
  interval = setInterval(function(){ 
             Next();
  }, speed);
}

// stop the movement
function StopThis(){
  clearInterval(interval);
}

function Next (){
  console.log("do the next funciton");
/*
  var li=$('ul#latest-news-slider li.active');

            if(li.next().length>0 )
            {
                li.removeClass('active', 100, "easeInBack");
                li.next().addClass('active', 100, "easeInBack");

            }else {
               li.removeClass('active', 100, "easeInBack");
               $('ul#latest-news-slider li').first('li').addClass('active', 100, "easeInBack");
            }
            */
}

StartThis(1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">START</button>
<button id="stop">STOP</button>

Answer 2

非常感谢您的努力，但我没有资格得到它；

可以应用on here? (codepen link)

函数幻灯片(){

            var li=$('ul#latest-news-slider li.active');

            if(li.next().length>0 )
            {
                li.removeClass('active', 3000, "easeInBack");
                li.next().addClass('active', 3000, "easeInBack");

            }else if(li.prev().length>0){
               li.removeClass('active', 3000, "easeInBack");
               $('ul#latest-news-slider li').first('li').addClass('active', 3000, "easeInBack");
            }else
            {
                return;
            }
        }

        $('.next').click(function(){

            var li=$('ul#latest-news-slider li.active');

            if(li.next().length>0 )
            {
                li.removeClass('active', 100, "easeInBack");
                li.next().addClass('active', 100, "easeInBack");

            }else {
               li.removeClass('active', 100, "easeInBack");
               $('ul#latest-news-slider li').first('li').addClass('active', 100, "easeInBack");
            }
        });

        $('.prev').click(function(){

            var li=$('ul#latest-news-slider li.active');

            if(li.prev().length>0 && li.prev().is("li"))
            {
                li.removeClass('active', 100, "easeInBack");
                li.prev().addClass('active', 100, "easeInBack");

            }else {

            }
        });

如何在 div 内容滑块 jquery 上设置自动播放

How to set autoplay on a div content slider jquery

javascript

jquery

slider

slideshow

autoplay