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

这是a fiddle：

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

1 个答案: