水平滾動Jquery的隱藏/顯示滾動箭頭

Question

我試圖構建一個水平滾動的網站，與前進和後退箭頭（你可以在這裏查看一個粗略的JS提琴：http://jsfiddle.net/KcDqu/5/）

這是jQuery的我到目前爲止：

$(document).ready(function() { 
$('a.right-arrow').click(function() { 
    $('section').animate({ 
    marginLeft: "+=920" 
    }, "medium"); 
    }); 
    $('a.left-arrow').click(function() { 
    $('section').animate({ 
    marginLeft: "-=920" 
    }, "medium"); 
    }); 
}); 

這工作到目前爲止很好。但是，我想添加兩件事情。首先，在最初的顯示中，不應該有左箭頭，因爲沒有內容要被查看到左側，我不希望用戶只是滾動到空白區域。

其次，我想要隱藏右箭頭，因爲同樣的原因沒有更多內容顯示在右側。

似乎無法弄清楚做到這一點的最好辦法...

任何幫助將非常感激。

Answer 1

你可以取margin-left的值，並將其用於寫作條件。不要忘記在動畫函數的回調函數中使用條件來獲得準確的值。

Here is jsFiddle.

$(document).ready(function() { 
    var windowWidth = $(window).width(); 
    var maxRange = windowWidth * -2; 

    //note: all of the conditions are same 
    var val = parseInt($('section').css('margin-left')); 
    if(val >= 0) { $('.right-arrow').hide();$('.left-arrow').show(); } 
    else if(val < 0 && val > maxRange) { $('.right-arrow, .left-arrow').show(); } 
    else if(val <= maxRange) { $('.left-arrow').hide();$('.right-arrow').show(); } 


    $('a.right-arrow').click(function() { 
     $('section').animate({ marginLeft: "+=" +windowWidth+ "px" },600,function() { 
      var val = parseInt($('section').css('margin-left')); 
      if(val >= 0) { $('.right-arrow').hide();$('.left-arrow').show(); } 
      else if(val < 0 && val > maxRange) { $('.right-arrow, .left-arrow').show(); } 
      else if(val <= maxRange) { $('.left-arrow').hide();$('.right-arrow').show(); } 
     }); 
    }); 
    $('a.left-arrow').click(function() { 
     $('section').animate({ marginLeft: "-=" +windowWidth+ "px" },600,function() { 
      var val = parseInt($('section').css('margin-left')); 
      if(val >= 0) { $('.right-arrow').hide();$('.left-arrow').show(); } 
      else if(val < 0 && val > maxRange) { $('.right-arrow, .left-arrow').show(); } 
      else if(val <= maxRange) { $('.left-arrow').hide();$('.right-arrow').show(); } 
     }); 
    }); 
}); 

，並注意不要在這些sitiations使用else，它可能會產生衝突。

Answer 2

代碼有點困難，因爲你的水平幻燈片被硬編碼爲920，並不總是窗口的寬度。這將導致一些內容根據窗口的大小被跳過。

得到了箭頭與這個jQuery的正常工作：

$(document).ready(function() { 
    var leftMargin = 0; 
    var width = $(document).width(); 
    var windowWidth = $(window).width(); 
    $('.left-arrow').click(function() { 
     $('section').animate({ 
      marginLeft: "+=" + windowWidth 
     }, "medium"); 

     $('.right-arrow').show(); 
     leftMargin = (leftMargin - windowWidth) 
     if (leftMargin == 0) { 
      $('.left-arrow').hide(); 
     } 
    }); 
    $('.right-arrow').click(function() { 
     $('section').animate({ 
      marginLeft: "-=" + windowWidth 
     }, "medium"); 

     $('.left-arrow').show(); 
     leftMargin = (leftMargin + windowWidth); 
     if (leftMargin > width - windowWidth) { 
      $('.right-arrow').hide(); 
     } 
    }); 
}); 

這也將設置你的箭滑動到窗口的寬度，所以沒有內容會被錯過。

另外，jsFiddle

編輯：刪除了其他人，因爲他們是不需要的。

Answer 3

通常情況下，我會給你一些鏈接到現有的滑塊腳本，但我不知道任何處理調整大小很好。

所以我已經適應從我自己的PHP異常處理程序:)

$('#list').each(function(){ 

    var list = $(this), 
     currentPos = 0, 
     itemCount = list.children().length; 

    $('.right, .left').click(function(){ 

    // +100 = right, -100 = left 
    var direction = $(this).hasClass('right') ? 100 : -100, 
     nextIndex = direction > 0 ? currentPos + 1 : currentPos - 1; 

    // do nothing if there is animation happening, 
    // or if index is out of boundaries 
    if($('> li', list).is(':animated') 
     || (direction > 0 && nextIndex > itemCount - 1) 
     || (direction < 0 && nextIndex < 0) 
    ) return; 

    var next = $('> li:eq(' + nextIndex + ')', list), 
     current = $('> li:eq(' + currentPos + ')', list); 

    currentPos = nextIndex; 

    // determine if the link needs to be hidden 
    $('.left, .right').removeClass('hide');  
    if(currentPos === 0 || currentPos === itemCount - 1) 
     $(this).addClass('hide'); 

    // adjust height of the container 
    list.css('height', Math.max(current.outerHeight(true), next.outerHeight(true)) + 'px'); 

    // make the current slide absolute 
    current.css({ 
     position: 'absolute', 
     left: 0, 
     top: 0, 
     width: '100%', 
     height: current.outerHeight(true) + 'px' 
    }); 

    // show the next slide 
    next.css({ 
     position: 'absolute', 
     left: direction + '%', 
     top: 0, 
     width: '100%', 
     height: next.outerHeight(true) + 'px' 
    }).show().animate({left: '0%'}, 300, 'swing', function(){ 
     next.css({ 
     position: 'relative', 
     left: 'auto', 
     top: 'auto' 
     }); 

    }); 

    // hide the current slide 
    current.animate({left: (-direction) + '%'}, 300, 'swing', function(){ 
     current.hide();      
    });          

    }); 

    // mouse wheel action within the list area 
    list.mousewheel(function(event, delta){    
    (delta > 0) ? $('.right').click() :$('.left').click();         
    }); 

});   

CSS一些代碼：

.hide{ 
    display:none; 
}  

#list{ 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
} 

#list > li{ 
    display: none; 
} 

#list > li:first-child{ 
    display: block; 
} 

HTML結構應該是這樣的：

<a class="left"> left </a> 
<a class="right"> right </a> 

<ul id="list">      
    <li> ... </li> 
    ...   
</ul> 

DEMO

mousewheel jQuery插件。如果您不需要鼠標滾輪支持，請移除最後一個事件。