Question

我正在使用mousewheel jQuery插件并尝试创建一个简单的滑块。这是一个示例，但滑块next和prev按钮无法正常工作。

$('.container').mousewheel(function(event, delta) {
      this.scrollLeft -= (delta * 40);
      event.preventDefault();
});


// next & prev option

//prev

$('.prev').click(function(){
         $('.storepos').val($('.storepos').val() / 1 - 110);
         $('.container').animate({scrollLeft:$('.storepos').val()}, 200);
     });


//next

  $('.next').click(function(){
         $('.storepos').val($('.storepos').val() / 1 + 110);
         $('.container').animate({scrollLeft:$('.storepos').val()}, 200);
     });

.container{overflow-x:scroll}
.content {width:1600px}
.items { background:black;
       color:white;
       margin-left:10px;
       width:100px;
       height:100px;
       float:left;
       text-align:center
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<div class="container">
<div class="content">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
<div class="items">10</div>
</div>
</div>
<a href="#" class="prev">Prev</a> / <a href="#" class="next">Next</a>
<input class="storepos" value="" />

当next / prev项目结束时需要停止位置更新。

Answer 1

在你的onclick函数中检查你的storepos元素的if语句的值

上一个按钮

$('.prev').click(function(){
    var storepos = $(".storepos").val();
    if(storepos == 0){
        //Do nothing
    }else{
        $('.storepos').val($('.storepos').val() / 1 - 110);
        $('.container').animate({scrollLeft:$('.storepos').val()}, 200);
    }
});

下一步按钮

<强>更新

$('.next').click(function(){
    var storepos = $(".storepos").val();
    var maxLength = (($(".items").length * 110) / 2);
    if(storepos == maxLength){
        //Do nothing
    }else{
        $('.storepos').val($('.storepos').val() / 1 + 110);
        $('.container').animate({scrollLeft:$('.storepos').val()}, 200);
    }
});

简单的jquery滑块

1 个答案: