Question

我正在尝试创建一个非常基本的滑动旋转木马，用户可以向左或向右导航。我正在使用的脚本是自动为包装器div中的每个项目分配一个绝对左侧位置，它的几乎按预期运行。但是，当我单击我的左侧或右侧导航按钮时，不是减少/增加每个项目上左侧定位的当前值，而是将它们全部更改为相同的值（这似乎取决于组中的第一个项目））。

我一直在撞墙挡在头上。非常感谢任何见解！

这是我的按钮点击操作示例：

$('.leftarrow').on('click', function() {
  $('.item').each(function() {
    $(this).animate({ left: '-=200' }, 1000);    
  });
});

已修改为添加所有代码的片段

  var $item = $('.singleItem');

  var curX = 0;
  var move = 0;

  $item.each(function() {
    $(this).css('left', curX);

    curX += $(this).outerWidth(true);
    move = $(this).outerWidth();
  });

  $leftArrow = $('.leftarrow');
  $rightArrow = $('.rightarrow');

  $leftArrow.on('click', function() {
    $item.each(function() {
      $(this).animate({
        left: '-=255'
      }, 1000);
    });
  });

  $rightArrow.on('click', function() {
    $item.each(function() {
      $(this).animate({
        left: '+=255'
      }, 1000);
    });

  });

.scrolling_container {
  height: 250px;
  width: 90%;
  overflow: hidden;
  margin: 0 auto;
  background-color: red;
}
.scrolling_container .scrolling_inner {
  width: 500px;
  position: relative;
}
.singleItem {
  background: #dbdae0;
  position: absolute;
  width: 255px;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="scrolling_container">
  <div class="rightarrow">
    <h1>&raquo;</h1>
  </div>
  <div class="leftarrow">
    <h1>&laquo;</h1>
  </div>

  <ul class="scrolling_inner">
    <li class="singleItem">CONTENT</li>
    <li class="singleItem">CONTENT</li>
    <li class="singleItem">CONTENT</li>
    <li class="singleItem">CONTENT</li>
    <li class="singleItem">CONTENT</li>
  </ul>

</div>

Answer 1

似乎工作正常，我猜你代码中的其他内容正在弄乱它。你能提供一段代码片段吗？

＆＃13;

$('.leftarrow').on('click', function() {
  $('.item').each(function() {
    $(this).animate({ left: '-=200' }, 1000);    
  });
});

＆＃13;

.item { position: absolute; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="leftarrow">left</button>

<div class="item" style="top: 110px; left: 20px;">ITEM</div>
<div class="item" style="top: 120px; left: 200px;">ITEM</div>
<div class="item" style="top: 30px; left: 80px;">ITEM</div>
<div class="item" style="top: 40px; left: 230px;">ITEM</div>
<div class="item" style="top: 50px; left: 120px;">ITEM</div>
<div class="item" style="top: 60px; left: 0px;">ITEM</div>
<div class="item" style="top: 70px; left: 190px;">ITEM</div>
<div class="item" style="top: 80px; left: 310px;">ITEM</div>
<div class="item" style="top: 90px; left: 40px;">ITEM</div>
<div class="item" style="top: 100px; left: 60px;">ITEM</div>

＆＃13;

.animate（）左侧位置减少将容器中的所有元素更改为相同的值

1 个答案: