获取滑块会根据当前分页数字移动

Question

此滑块每 5 秒移动一次：1、2、3 等...

它工作得很好。

但这里的问题是当我点击第 4、5 或 6 页时......等等，例如，当它停止时它会回到上一页......

（对不起我的英语）在这里我把代码放在JSFiddle中：

    $(function() {
    $("#paginationDiv").paginate({
        count       : 9,
        start       : 1,
        display     : 10,
        border                  : true,
        border_color            : '#0060aa',
        text_color              : '#0060aa',
        background_color        : '#f2f2f2',    
        border_hover_color      : '#fff',
        text_hover_color        : '#fff',
        background_hover_color  : '#0060aa', 
        rotate                  : true,             
        images                  : true,
        mouse                   : 'press',
        onChange                : function(page){
    $('._current','#paginationdemo').removeClass('_current').hide();
                                    $('#p'+page).addClass('_current').show();
                                  }
    });
    var lis = $(".jPag-pages li")
        console.log(lis.length)
        currentHighlight = 0;
        N = 5;//interval in seconds
    setInterval(function() {
        console.log(currentHighlight)
        currentHighlight = (currentHighlight+1 ) % lis.length;
        lis.eq(currentHighlight).click();
    }, N * 1000);
    });

所有代码 ： http://jsfiddle.net/DEpjM/6/

例如，单击第 6 页，看看它如何返回第一页......

我在这里想要的是当我单击任何分页页面时，滑块在 5 秒后向前移动到下一页，而不是回到它第一次停止的位置......

Answer 1

如果你改变负责控制滑块的JavaScript，你可以做你想做的事：

$(function () {
  $("#paginationDiv").paginate({
    count: 9,
    start: 1,
    display: 10,
    border: true,
    border_color: '#0060aa',
    text_color: '#0060aa',
    background_color: '#f2f2f2',
    border_hover_color: '#fff',
    text_hover_color: '#fff',
    background_hover_color: '#0060aa',
    rotate: true,
    images: true,
    mouse: 'press',
    onChange: function (page) {
      $('._current', '#paginationdemo').removeClass('_current').hide();
      $('#p' + page).addClass('_current').show();
    }
  });
  var lis = $(".jPag-pages li"),
      N = 2,
      interval;
  function startSlides(currentHighlight) {
    interval = setInterval(function () {
      currentHighlight = (currentHighlight + 1) % lis.length;
      lis.eq(currentHighlight).click();
    }, N * 1000);
  }
  $("#paginationDiv").on("click", function (e) {
    if (e.target.nodeName === "A") {
      var slide = Number(e.target.innerHTML);
      clearTimeout(interval);
      startSlides(slide - 1);
    }
  });
  startSlides(0);
});

这是一个小提琴：