设置div的最大水平滚动

Question

我在下面有一个jquery图像滚动条，只是水平向左/向右滚动。 下面的循环可以包括无限数量的图像。

我遇到的问题是，当它向左和向右滚动时，一旦图像结束，你可以继续滚动，所以基本上你只是滚动白色空间！

如何设置最大滚动，以便在图像结束时不再允许滚动？ 显然，图像的数量是动态的，因此它可以有1或100个图像。

<div id="imgThumbs" class="scroller" style="position:relative;height:75px;width: 306px; overflow: hidden; white-space: nowrap;">
    <a href="#" id="left-button" style="left:14px;top:25px;position:absolute;">
        <img src="left-button.png" width="20" height="20" />
    </a>  
    <a href="#" id="right-button" style="right:14px;top:25px;position:absolute;">
        <img src="right-button.png" width="20" height="20" />                               
    </a>
    <div id="contentScroller">                         
    <?php $counter = 1; while(the_repeater_field('images')): ?>                     
        <a class="fancybox" rel="group" href="<?php echo the_sub_field('high_resolution_image'); ?>" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
            <img class="image-<?php echo $counter; ?>" src="<?php echo the_sub_field('image'); ?>" width="90" height="68" alt="<?php echo the_title(); ?> <?php echo $counter; ?>" />
        </a>
     <?php $counter++; endwhile; ?>
     </div>
</div>
<script>
    jQuery(document).ready(function ($) {
        $('#right-button').click(function() {
            $('#contentScroller').animate({
                marginLeft: "-=306px"
            }, "fast");
        });
        $('#left-button').click(function() {
            $('#contentScroller').animate({
                marginLeft: "+=306px"
            }, "fast");
        });                     
    });
</script> 

UPDATE

这是一个小提琴 - http://jsfiddle.net/jCskY/2/

Answer 1

比较marginLeft与由内容的总和计算的宽度 a的宽度 。

如果边距超过宽度 ，则应隐藏按钮。 否则，它应该显示。

这是一个如何实现它的片段。

另外，请看这个小提琴，现场演示！

var updateRightLeftButtons = function() {
    if (306 > (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
        $('#left-button').hide();
    } else {
        $('#left-button').show();
    }
    if ((($('#contentScroller a').width() * $('#contentScroller a').length) - 306) < (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
        $('#right-button').hide();
    } else {
        $('#right-button').show();
    }
};
$('#right-button').click(function() {
    updateRightLeftButtons();
    if ($(this).is(':visible'))
    $('#contentScroller').animate({
        marginLeft: "-=306px"
    }, "fast", updateRightLeftButtons);
});
$('#left-button').click(function() {
    updateRightLeftButtons();
    if ($(this).is(':visible'))
    $('#contentScroller').animate({
        marginLeft: "+=306px"
    }, "fast", updateRightLeftButtons);
});
updateRightLeftButtons();​

Answer 2

<?php
$dirname = '_/img/album';
$pattern = "/(\.jpg$)/i"; // valid image extensions
if (is_dir($dirname)) {
    if ($handle = opendir($dirname)) {
        $count = 0;
        while (false !== ($file = readdir($handle))) {
            // if this file is a valid image
            if (preg_match($pattern, $file)) {
                $count++;
            }
        }
        closedir($handle);
    }
}
?>

然后将计数乘以20并将值设置为div容器的宽度