Jquery 水平滚动条不滚动

我可能错过了一些非常简单的东西，但我就是不能让它工作！我是基于这个问题的-

它不会向左或向右滚动

我还有一个错误：

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

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

jQuery（文档）.ready（函数（$）{
$（“#右键”）。单击（函数）{
$（“#contentScroller”）。设置动画({
边缘左侧：-=“306px”
}“快”）；
});
$（“#左按钮”）。单击（函数）{
$（“#contentScroller”）。设置动画({
marginLeft:+=“306px”
}“快”）；
});                     
});

更新

---

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

在您的点击处理程序中，

函数{

应该是

函数（）{

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

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");
            });                     
         }
    });
});

jQuery（文档）.ready（函数（$）{
$（“#右键”）。单击（函数（）{
如果（$（'#contentScroller'）.css（'marginLeft'）>0{
$（“#contentScroller”）。设置动画({
边缘左侧：“-=306px”
}“快”）；
});
}
$（“#左按钮”）。单击（函数（）{
if（$（'contentScroller'）.css（'marginLeft'）<-1*$（'contentScroller'）.width（））{
$（“#contentScroller”）。设置动画({
边缘左侧：“+=306px”
}“快”）；
});                     
}
});
});

但问题出在哪里？@Lion抱歉，已更新，单击按钮时不会向左或向右滚动。在单击处理程序中，

函数{

应该是

function（）{

。这将解决您看到的错误。

marginLeft:-=“305px”

不正确。需要将-=放在引号内。

marginLeft:“-=305pc”

很好，这些讨厌的语法错误每次都会让你头疼。一个字符放错了位置，整个东西就坏了。我刚刚找到了其他东西……即使内容结束，你也可以保持左右滚动。因此，如果其中有6个图像，它会显示前3个，单击右键，显示下3个，单击右键，然后滚动到空area，再次单击，以此类推。有没有办法解决这个问题？嗯，刚刚尝试了更新，它现在似乎没有向左/向右滚动。是的，我没有测试它。你可能需要执行

parseInt（$（'contentScroller'）.css（'marginLeft'））