jquery - 水平滚动条不滚动

Question

我可能错过了一些非常简单的东西，但我无法让它工作！我基于这个问题 - Horizo​​ntal scrolling div using buttons

它不会向左或向右滚动。

我也有这个错误：

此外，当单击链接时，页面会重新加载/跳转，有没有办法解决这个问题？

                <div id="imgThumbs" class="scroller" style="height:97px;width: 306px; overflow: hidden; white-space: nowrap;">
                    <a href="#" id="left-button">Left</a>  
                    <a href="#" id="right-button">Right</a>
                    <div id="contentScroller">                         
                    <?php $counter = 1; while(the_repeater_field('images')): ?>                     
                        <a href="#" 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>

更新

我刚刚发现了别的东西……即使内容结束，您也可以继续左右滚动。因此，如果那里有 6 个图像，它会显示前 3 个，单击右键，显示下一个 3，单击右键并滚动到空白区域，再次单击，依此类推。有没有办法解决这个问题？

Answer 1

在您的点击处理程序中，function {应该是function() {.

marginLeft: -="305px"是不正确的。-= 需要放在引号内。marginLeft:"-=305px"

更新

我没有对此进行测试，但基本上你需要做的是确保在做动画之前你不在左边或右边。您可能需要为您的应用程序对此进行一些修改，但它应该为您提供基本概念。

jQuery(document).ready(function ($) {
    $('#right-button').click(function() {
        if($('#contentScroller').css('marginLeft') > 0){
            $('#contentScroller').animate({
                marginLeft: "-=306px"
                }, "fast");
             });
         }

    $('#left-button').click(function() {
         if($('#contentScroller').css('marginLeft') < -1 * $('#contentScroller').width()){
            $('#contentScroller').animate({
                marginLeft: "+=306px"
                }, "fast");
            });                     
         }
    });
});