Question

我有两个按钮的页面（向左滚动和向右滚动），点击后，页面必须左右按div宽度（每个div有不同的宽度）。这可以用jQuery完成吗？我不知道如何读取当前的div id（一个靠近边框的左侧），以及如何通过上一个/下一个div的宽度定义滚动（左或右）？

Answer 1

点击只需增加，减少一个计数器var c。
这有助于我们按.eq( c )确定所需的DIV目标我们所需要的只是获得所需的DIV .offset().left并将页面移动到该位置：

jsBin demo

HTML（向您的DIV添加.box）：

<div class="box" id="01" style="width:200px; height:100px; border:solid 1px; float:left">div01</div>

jQuery的：

$(function(){

  var c = 0;
  var boxN = $('.box').length;

  $('#left, #right').on('click', function( e ){

    e.preventDefault();

    c = this.id=='right' ? ++c%boxN : --c ;
    if(c<0){ c=boxN-1; }
    var boxL = $('.box').eq( c ).offset().left;

    $('html, body').stop().animate({scrollLeft: boxL});


  });

});

Answer 2

如果你在谈论某种滑块，那么你有一个containerdiv和一个innerdiv，其中包含了所有项目的总长度。

containerdiv将隐藏溢出

接下来，您可以控制div的位置

这只是一种思考方式......

可变量的水平步骤滚动

2 个答案:

jsBin demo