javascript - 带循环的 jQuery 自定义 slider 创建

Question

请帮我配置我的 slider 。如果您单击任何行中的数字，您会看到，jquery 为它们提供类并将 slider 旋转到 index()我想向我的 slider 添加箭头，并进行无限循环。例如，如果选择了 2 号，右箭头会将所有 3 行移动到 3 号。反之亦然。这是我的代码。

$('.item').click(function() {
  $this = $(this);
  $(".item").removeClass("active");

  $('.item').each(function() {
    if (+$(this).index() == +$this.index()) {
      $(this).addClass('active');

      var box = $(this).closest('.scroll');
      var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
      box.animate({
        scrollLeft: x
      });
    }
  });

});

* {
  margin: 0;
  padding: 0;
}
.first-line,
.second-line,
.line3 {
  margin-top: 20px;
}
.second-line,
.line3 {
  margin-left: 20px;
}
.second-line {
  width: 200px;
  overflow: auto;
}
.line3 {
  width: 200px;
  overflow: hidden;
}
.wrap {
  width: 500px;
}
.number,
.anotherclass,
.onemoreclass {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  border: 1px solid blue;
  text-align: center;
  margin: 0 10px;
}
.right-arrow,
.left-arrow {
  display: inline-block;
  cursor: pointer;
  margin: 0 20px;
}
.number.active,
.anotherclass.active,
.onemoreclass.active {
  background: blue;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-arrow"> << </div>
    <div class="right-arrow"> >> </div>
    <div class="first-line scroll">
      <div class="anywrap">
        <div class="number active item">1</div>
        <div class="number item">2</div>
        <div class="number item">3</div>
        <div class="number item">4</div>
        <div class="number item">5</div>
      </div>
    </div>
    <div class="second-line scroll">
      <div class="wrap">
        <div class="anotherclass item active">1</div>
        <div class="anotherclass item">2</div>
        <div class="anotherclass item">3</div>
        <div class="anotherclass item">4</div>
        <div class="anotherclass item">5</div>
      </div>
    </div>
    <div class="line3 scroll">
      <div class="wrap">
        <div class="onemoreclass item active">1</div>
        <div class="onemoreclass item">2</div>
        <div class="onemoreclass item">3</div>
        <div class="onemoreclass item">4</div>
        <div class="onemoreclass item">5</div>
      </div>
    </div>

Answer 1

添加到您的功能以支持您想要的所有功能。让我知道这是否有帮助!在我更改的区域添加评论以解释我在做什么。我还通过使用 var 定义它，使 $this 成为局部变量而不是全局变量。

fiddle :http://jsfiddle.net/AtheistP3ace/3ewguuyL/

JS:

// Attach click to all clickable elements
$('.item, .left-arrow, .right-arrow').click(function () {
    var $this = $(this);

    // check if we clicked an item or arrow
    if (!$this.hasClass('item')) {
        // if left arrow, get previous item of first active we find
        if ($this.hasClass('left-arrow')) {
            $this = $('.item.active:first').prev();
        }
        // if right arrow, get next item of first active we find
        else if ($this.hasClass('right-arrow')) {
            $this = $('.item.active:first').next();
        }
        // Handle being at the start or end of items
        if ($this.length == 0) {
            return;
        }
    }

    // Let your previous code run
    $(".item").removeClass("active");

    $('.item').each(function () {
        if (+$(this).index() == +$this.index()) {
            $(this).addClass('active');

            var box = $(this).closest('.scroll');
            var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
            box.animate({
                scrollLeft: x
            });
        }
    });

});