Question

我对Jquery并不大，并且在这里有一个情况;

如何在这个滑动的caroussel中进行自动播放？

旋转木马正在添加一个＆＃34;当前＆＃34;类到一个显示在顶部的li，而非＆＃34; current＆＃34;李被隐藏了;

我拍摄的原始剧本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

我非常感谢你的努力，但我没有资格获得它;

它可以应用on here? (codepen link)

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 2

不确定如何准确实现此功能，但您可以使用setInterval。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

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

2 个答案: