Question

我正在创建一个圆形图像的jquery滑块。这是HTML

＆＃13;

 jQuery(document).ready(function($) {


   var $lis = $('ul').find('li'),
     length = $lis.length;

   $lis.each(function(index, item) {
     $(item).attr('data-id', index);
   });


   function slider($lis, index, length) {
     $lis.each(function(index, item) {
       item.className = '';
     });
     index += length;
     $($lis[index % length]).addClass('active');
     $($lis[(index - 1) % length]).addClass('left1');
     $($lis[(index - 2) % length]).addClass('left2');
     $($lis[(index + 1) % length]).addClass('right1');
     $($lis[(index + 2) % length]).addClass('right2');
   }


   slider($lis, 2, length);

   $lis.on('click', function(e) {
     var id = parseInt($(e.target).parents('li').attr('data-id'));
     slider($lis, id, length);
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="peopleSlider" class="container text-center">
  <div class="row">
    <a href="#" class="scrollLeft" id="leftArrow">Left</a><a href="#" class="scrollRight" id="rightArrow">Right</a>
    <ul>
      <li class="left2">
        <img src="img/1.png" width="150" height="150">
      </li>

      <li class="left1">
        <img src="img/2.png" width="150" height="150">
      </li>

      <li class="active">
        <img src="img/3.png" width="150" height="150">
      </li>

      <li class="right1">
        <img src="img/4.png" width="150" height="150">
      </li>

      <li class="right2">
        <img src="img/5.png" width="150" height="150">
      </li>
    </ul>
  </div>

</div>

＆＃13;

我的问题是在点击＆＃34;左＆＃34;之后移动它。和＃34;对＆＃34;纽扣。我脑子里有一些想法，但不知道如何实现它们。我想我需要得到.active图像的索引参数并将其更改为-1，以便＆＃34;左＆＃34; ＆＃34;右＆＃34; +，但我不知道如何做到这一点。也许可以有人给我一个暗示，或者展示类似的东西。

Answer 1

因此，从概念上讲，你想要做的是为＃34; left＆＃34;设置动画。 css元素的位置。所以你需要的第一件事就是知道每个＆＃34;幻灯片的宽度＆＃34;：

var slide_width = $lis.first().outerWidth(true);

然后，当您想要滑动到第三张幻灯片时，假设这意味着将第三张幻灯片放在滑块的最左侧，您只需通过动画制作ul元素的left属性即可：

$('ul').animate({left: (0 - ((slide_index) * slide_width)) + "px"});

为了好，你可能还想确定你是否要求滑到最后一张幻灯片，例如，它不会一直滑到左边然后什么也没有否则显示在它的右边。您希望确保计算的左绝对值始终小于滑块的完整内宽。

您需要确保您周围的容器在css中设置为overflow: hidden;，当然，position: relative; top: 0; left: 0;并且应该这样做！

希望这有帮助！

Answer 2

我做到了。这很简单。这是代码：

$('#leftArrow').click(function(e){
  var id = parseInt($('.left1').attr('data-id'));
  slider($lis,id,length);
});
$('#rightArrow').click(function(e){
  var id = parseInt($('.right1').attr('data-id'));
  slider($lis,id,length);
});

jquery圆形图像滑块

2 个答案: