Question

我正在构建一个脚本来处理很长的分页。为此我使用jQuery滑块。

我使用here中的一些修改过的函数。

到目前为止，这是js代码。唯一缺少的是在脚本加载时移动到正确位置（滑块）的分页div。在初始化时，我只想运行在用户使用滑块时运行的相同功能。

    // Calculate total width
    var totalWidth = 0;
    $('.pageItem').each(function() {
        totalWidth += $(this).outerWidth(true);
    });

    // Total number of pages
    var totalPages = $('.pageItem').size();

    // Calculate current position ( starts counting at 0 )
    var currentPage = $('li').index($('.current')) + 1;

    // Scroll start position
    var scrollPosition = [currentPage / totalPages] * 100;

    $('#pagiMoreSlider').slider({
        change:         handleSliderChange,
        slide:          handleSliderChange,
        max:            100,
        value:          scrollPosition,
    });
    function handleSliderChange(e, ui){
        var maxScroll = $('#pagiMoreContent').attr('scrollWidth') - $('#pagiMoreContent').width();
        $('#pagiMoreContent').attr({
            scrollLeft: ui.value * (maxScroll / 100)
        });
    }

    // Set width pagiMore
    $('#pagiMore ul').width(totalWidth);

谢谢！

Answer 1

嗯，我不知道我们是否使用相同的插件，但这是移动滑块的代码：

$('#content-slider').slider("moveTo", "-=1");
$('#content-scroll').stop();

使用jQuery滑块进行可滚动分页时，获取正确的起始位置

1 个答案: