Question

我有一个（部分）页面使用以下JS水平滚动：

$(document).ready(function () {
var sildeNum = $('.page').length,
    wrapperWidth = 100 * sildeNum,
    slideWidth = 100/sildeNum;
$('.wrapper').width(wrapperWidth + '%'); 
$('.page').width(slideWidth + '%');

$('a.scrollitem').click(function(){
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    var slideNumber = $($(this).attr('href')).index('.page'),
        margin = slideNumber * -100 + '%';

    $('.wrapper').animate({marginLeft: margin},500);
    return false;
});
});

我的主导航垂直滚动页面，subnav水平滚动。如何为水平部分创建上一个/下一个链接（在面板之间移动）？

这是一个演示来解释： http://cloudlevel.me/test

Answer 1

这是您的onclick功能

function previous(){
    var slideNumber = $($('a.scrollitem.selected').attr('href')).index('.page') - 1,
            margin = slideNumber * -100 + '%';
    if(slideNumber >= 0){
        $('.wrapper').animate({marginLeft: margin},500);
        $('a.scrollitem').removeClass('selected');
        $('a.scrollitem').eq(slideNumber).addClass('selected');
    }
}
function next(){
    var slideNumber = $($('a.scrollitem.selected').attr('href')).index('.page') + 1,
            margin = slideNumber * -100 + '%';
    if(slideNumber < $('.scrollitem').size()){
        $('.wrapper').animate({marginLeft: margin},500);
        $('a.scrollitem').removeClass('selected');
        $('a.scrollitem').eq(slideNumber).addClass('selected');
    }
}

这些是您的链接

<nav>
  <a href="#" id="previousLink" onclick="previous();">Previous</a>
  <a href="#" id="nextLink" onclick="next();">Next</a>
</nav>

我们使用从左侧面板菜单导航时使用的完全相同的语义。只设置当前的那个，就是这样。

Answer 2

计算div的大小然后使用jQuery的scrollLeft（val）函数在点击时移动水平滚动。

以前和;下一个链接在水平滚动页面上

2 个答案: