上一頁及後續環節

我有那個水平滾動使用下面的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

上一頁及後續環節

回答

相關問題