Question

请帮我配置我的滑块。如果单击任意行中的数字，您可以看到，jquery为它们提供类和旋转滑块到index() 我想在我的滑块上添加箭头，并进行无限循环。例如，如果选择数字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

已添加到您的功能中以支持您想要的所有内容。如果这有帮助，请告诉我！在我改变的区域添加了注释，以解释我在做什么。我还通过$this定义了var局部变量而不是全局变量。

小提琴：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
            });
        }
    });

});

Answer 2

查看https://jsfiddle.net/0m0raekm/

对于箭头支持，我刚刚添加了这部分：

$('.arrow-control').click(function(){
   var direction = $(this).hasClass('left-arrow') ? -1 : 1;
   var currentItemIndex = $('.anywrap .active').index();
   var itemCount = $('.anywrap .item').length;
   var nextItemIndex = (currentItemIndex + direction)%itemCount;
   var nextItem = $('.anywrap .item').get( nextItemIndex );
   $(nextItem).trigger( "click" );
});

它非常通用：它确定当前活动的项目，根据箭头方向和项目数（无限循环）选择下一个项目，并触发应该是下一个项目的单击事件。因此，在确定下一个项目后，它会使用您的原始代码来实现实际效果。

用循环创建jQuery自定义滑块

2 个答案: