设置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

\n\n

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

\n\n

这是如何实施的一个片段。

\n\n

另外，请参阅这个小提琴，作为活生生的例子！

\n\n

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

\n