javascript - 水平滚动页面上的上一个和下一个链接

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

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

这里有一个演示来解释: 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>

我们使用的语义与从左侧面板菜单导航时使用的语义完全相同。只需设置当前的即可。