jQuery停止滾動在最後一個元素

Question

我試圖讓畫廊的縮略圖之間的滾動功能。到目前爲止，縮略圖是滾動的，但是還是有一個小問題。如果滾動到達最後一個縮略圖，它會一直向右滾動（如果您正在向右滾動），左邊部分也會發生同樣的情況。

第二個問題是，如果只有一個縮略圖只有一個li它仍然滾動。

jQuery的：

var min = left = $('.thumbs ul').offset().left; 
var max = $('.thumbs li').length * 160 + min; 

$('.right').click(function() { 
    var width = $('.thumbs').width(); 
    if (left > width - max) { 
     left -= width; 
     if (left < width - max) left = width - max; 
     $('.thumbs ul').stop().animate({ 'left': left }, 1000); 
    } 
}); 

$('.left').click(function() { 
    var width = $('.thumbs').width(); 
    if (left < min) { 
     left += width; 
     if (left > min) left = min; 
     $('.thumbs ul').stop().animate({ 'left': left }, 1000); 
    } 
}); 

的HTML：

<a class="arrow left">&larr;</a> 

<div class="thumbs"> 
    <ul> 
     <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> 
     <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> 
     <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> 
     <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> 
     <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> 
     <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> 
     <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> 
     <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> 
    </ul> 
</div> <a class="arrow right">&rarr;</a> 

這裏的JSFiddle

解決方案：

滾動應該從兩側（左側和右側）到達最後一個縮略圖時停止。如果沒有足夠的縮略圖進行滾動，那麼它應該保持不動。

請幫忙，謝謝:)

Answer 1

計算移動的邊界，並確保它不在該範圍之外滾動。當它滾動到負位置時，最小值爲-(sum of images - width of thumbs)，最大值爲0。

var left = 0; 

function scroll(dx) { 
    var width = $('.thumbs').width() - 40; 
    var min = width - $('.thumbs li').length * 110; 
    var l = Math.min(0, Math.max(min, left + width * dx)); 
    if (l != left) { 
     left = l; 
     $('.thumbs ul').stop().animate({ 'left': left }, 1000); 
    } 
} 

$('.right').click(function() { 
    scroll(-1.0); 
}); 

$('.left').click(function() { 
    scroll(1.0); 
}); 

演示：http://jsfiddle.net/Guffa/k9fxb1hp/3/

現在它在可見大拇指的整個寬度的步驟滾動。如果您想滾動80％的寬度，可以將1.0更改爲例如0.8。

Answer 2

你有沒有考慮過無限循環滾動？

$('.arrow-next').click(function() { 
 
    $(".slider").animate({left: "-=25px"}, 600, function(){ 
 
     var left = $(this).css('left'); 
 
     $(this).css('left', left == "0px" ? "175px" : left); 
 
    }); 
 
}); 
 

 
$('.arrow-prev').click(function() { 
 
    $(".slider").animate({left: "+=25px"}, 600, function(){ 
 
     var left = $(this).css('left'); 
 
     $(this).css('left', left == "200px" ? "25px" : left); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width: 150px"> 
 
    <button type="button" class="arrow-prev">></button> 
 
    <br> 
 
     <div style="display: inline-block; width: inherit; overflow: hidden;"> 
 
    <div id="before" style="position: absolute; left: 0px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div> 
 
    <div style="position: absolute; left: 25px; height: 25px; width: 25px; background-color:red; vertical-align:middle;" class="slider"></div> 
 
    <div style="position: absolute; left: 50px; height: 25px; width: 25px; background-color:purple; vertical-align:middle;" class="slider"></div> 
 
    <div style="position: absolute; left: 75px; height: 25px; width: 25px; background-color:blue; vertical-align:middle;" class="slider"></div> 
 
    <div style="position: absolute; left: 100px; height: 25px; width: 25px; background-color:green; vertical-align:middle;" class="slider"></div> 
 
    <div style="position: absolute; left: 125px; height: 25px; width: 25px; background-color:greenyellow; vertical-align:middle;" class="slider"></div> 
 
    <div style="position: absolute; left: 150px; height: 25px; width: 25px; background-color:yellow; vertical-align:middle;" class="slider"></div> 
 
    <div style="position: absolute; left: 175px; height: 25px; width: 25px; background-color:orange; vertical-align:middle;" class="slider"></div> 
 
    <div id="after" style="position: absolute; left: 175px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div> 
 
     </div> 
 
    <br> 
 
    <br> 
 
    <br> <button type="button" class="arrow-next" style="display:inline-block"> 
 
     <</button> 
 
</div>

Answer 3

你可以通過使用:last-child選擇測量列表中的最後li的位置，所以它反映了li的寬度調整最大。

var min = $('.thumbs li').position().left; 
var left = $('.thumbs ul:last-child').position().left; 
var max = $('.thumbs li').length * 110 - min; 

$('.right').click(function() { 
    var width = $('.thumbs').width(); 
    if (left > (width - max)) { 
     left -= width; 
     if (left < width - max) left = width - max; 
     $('.thumbs ul').stop().animate({ 'left': left }, 1000); 
    } 
}); 

$('.left').click(function() { 
    var width = $('.thumbs').width(); 
    if (left < min) { 
     left += width; 
     if (left > min) left = min; 
     $('.thumbs ul').stop().animate({ 'left': left }, 1000); 
    } 
}); 

查看JSFiddle。