上一页及后续环节

我有那个水平滚动使用下面的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

来源

2014-12-04 user2265915

上一页/下一页在面板菜单或面板本身？ – MiiinimalLogic 2014-12-04 15:08:19

面板之外 - 大致上我的占位符链接在示例上。 – user2265915 2014-12-04 15:44:37

这里是你的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>

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

来源

2014-12-04 16:59:39

谢谢Emre。当选定的面板是最后一个面板时，单击'下一个'再次增加边距，显示一个空面板。在第一个面板上点击上一个时也是如此。如果我点击最后一个面板上的'下一个'，然后点击空白面板上的'上一个'，它将显示另一个空面板。演示更新以说明。如何防止这种情况？ – user2265915 2014-12-04 18:34:25

是的，我的坏。我想不起这种情况。这实际上取决于你。如果你想停止在第一个和最后一个面板中移动到空面板，那么你应该以适当的方式检查幻灯片编号。如果当你到达边缘时你想滑到面板的另一端，我的意思是第一个和最后一个，那么你应该更新幻灯片编号并继续照常执行。我会尽快更新我的答案 – 2014-12-05 07:31:12

计算的div大小则使用jQuery的scrollLeft（VAL）功能移动水平滚动上点击。

来源

2014-12-04 16:30:19 MiiinimalLogic

上一页及后续环节

回答

相关问题