Question

如何使用导航按钮向左或向右滚动？

<div class="slider-wrap">
 <div class="slide-wrap">
    <div class="slider-slide-wrap"></div>
    <div class="slider-slide-wrap"></div>
    <div class="slider-slide-wrap"></div>
 </div>
</div>
 <div id="slider-left" class="slider-nav"></div>
 <div id="slider-right" class="slider-nav"></div>

JS

  $("#slider-left").click(function(){
   alert("< clicked.");
 });
 $("#slider-right").click(function(e){
        alert("> clicked.");

    $('.slide-wrap').scrollLeft(5000);
 });

Fiddle

Answer 1

您选择了错误的<div>。请注意选择器：$('.slider-wrap')（不是.slide-wrap）。

$("#slider-left").click(function () {
    $('.slider-wrap').animate({
        scrollLeft: 0
    }, 200);
});

我使用了.animate，因为您可以获得有关正在发生的事情的视觉反馈（所以我认为使用animate对于UX来说更好）。这对.scrollLeft()同样适用：

$("#slider-left").click(function () {
    $('.slider-wrap').scrollLeft(0);
});

在 fiddle

中查看它

水平滚动div

1 个答案: