12

我在下面有一个 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>

更新

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

4

2 回答 2

1

将marginLeft与由内容宽度之和计算的a宽度进行比较。

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

这是如何实现的片段。

另外，请参阅this fiddle，以获取实时示例！

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();​
于 2012-11-06T13:50:00.457 回答
-1 
<?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 容器的宽度

于 2012-11-06T14:19:10.453 回答