带有活动点的jQuery轮播

Question

我正在构建一个简单的轮播，一旦用户水平滚动，活动点将改变活动状态。但是，当我滚动时，jQuery左侧位置返回值没有改变：

li_left = li.position().left; // this is not changing value in console.log()

为什么会发生这种情况？完整代码如下。如果您运行，您可以看到li_left在控制台中没有变化。

var $div = $('.carousel__list');
var divleft = $div.position().left;

$('.carousel').scroll(function() {
  console.log('Scroll started')
  $('.carousel li').each(function() {
    li = $(this);
    li_left = li.position().left;
    console.log('li_left', li_left)
    if (li_left >= divleft && li_left + li.width() <= divleft + $div.width()) {
      $(this).css({
        opacity: '1'
      })
      $(this).siblings('li').css({
        opacity: '0.2'
      });
      return false;
    }
  });
})

.carousel {
  width: 400px;
  overflow-x: auto;
}

.carousel__list,
carousel__dots {
  list-style: none;
  padding: 0;
  margin: 0;
}

.carousel__list {
  width: 3000px;
  position: relative;
}

.carousel li {
  display: inline-block;
  background-color: grey;
  width: 140px;
  height: 140px;
  margin: 20px;
}

.dots {
  margin: 30px auto 50px auto;
  display: flex;
  padding: 0;
  justify-content: center;
}

.dots li {
  background-color: blue;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  list-style: none;
  margin: 0 5px 0 0;
  display: inline-block;
  opacity: 0.2
}

.dots li.active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="carousel">
  <ul class="carousel__list">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
    <li>Slide 5</li>
  </ul>
</div>

<ol class="dots">
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

作为参考，以下是我试图适应我的解决方案的jsfiddle链接。在此示例中，position().left正在更改：

http://jsfiddle.net/Vy33z/4/

Answer 1

我已经更改了一些代码，请看一下：

＆＃13;

＆＃13;

var moveSpace = $('.carousel__list li').outerWidth();

$('.carousel').scroll(function() {
	var activeDot = Math.round(Math.abs($('.carousel__list').position().left / moveSpace)) + 1;
  $('.dots li.active').removeClass('active');
  $('.dots li:nth-child(' + activeDot + ')').addClass('active');
})

$('.dots li').click(function() {
	var id = $(this).data("id");
  var scrollSpace = id * moveSpace;
	$('.carousel').scrollLeft(scrollSpace);
});

＆＃13;

.carousel {
  width: 400px;
  overflow-x: auto;
}

.carousel__list,
carousel__dots {
  list-style: none;
  padding: 0;
  margin: 0;
}

.carousel__list {
  width: 1200px;
  position: relative;
}

.carousel li {
  display: inline-block;
  background-color: grey;
  width: 140px;
  height: 140px;
  margin: 20px;
}

.dots {
  margin: 30px auto 50px auto;
  display: flex;
  padding: 0;
  justify-content: center;
}

.dots li {
  background-color: blue;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  list-style: none;
  margin: 0 5px 0 0;
  display: inline-block;
  opacity: 0.2;
  cursor: pointer;
}

.dots li.active {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="carousel">
  <ul class="carousel__list">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
    <li>Slide 5</li>
  </ul>
</div>

<ol class="dots">
  <li class="active" data-id="0" ></li>
  <li data-id="1" ></li>
  <li data-id="2" ></li>
  <li data-id="3" ></li>
  <li data-id="4" ></li>
</ol>

＆＃13;

＆＃13;

＆＃13;

JS小提琴演示： http://jsfiddle.net/Vy33z/105/

Answer 2

使用偏移而不是位置。 position.left没有改变，因为li元素与他的父元素相比不会改变他的位置。

off = li.offset();
li_left = off.left;

Answer 3

道歉，我的目标是错误的选择器。我一定很累。以下是有效点变化的正确解决方案：

＆＃13;

＆＃13;

var $div = $('.carousel__list');
var divleft = $div.position().left;

$('.carousel').scroll(function() {
    console.log('Scroll started')
    $('.carousel__list li').each(function() {
        li = $(this);
        li_left = li.offset().left;
        console.log('li', li)
        console.log('li_left', li_left)
        if (li_left >= divleft && li_left + li.width() <= divleft + $div.width()) {
            var index = $(this).index();
            $(this).css({opacity: '1'});
            $('.dots li:eq('+index+')').css({opacity: '1'});

            $(this).siblings('li').css({opacity: '0.2'});
            $('.dots li:eq('+index+')').siblings('li').css({opacity: '0.2'});

            return false;
        }
    });
})

＆＃13;

.carousel {
  width: 400px;
  overflow-x: auto;
}

.carousel__list, carousel__dots {
  list-style: none;
  padding: 0;
  margin: 0;
}

.carousel__list {
  width: 3000px;
  position: relative;
}

.carousel li {
  display: inline-block;
  background-color: grey;
  width: 200px;
  height: 200px;
  margin: 20px;
}

.dots {
  margin: 30px auto 50px auto;
  display: flex;
  padding: 0;
  justify-content: center;
}

.dots li {
  background-color: blue;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  list-style: none;
  margin: 0 5px 0 0;
  display: inline-block;
  opacity: 0.2
}

.dots li.active {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="carousel">
  <ul class="carousel__list">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
    <li>Slide 5</li>
  </ul>
</div>

<ol class="dots">
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

＆＃13;

＆＃13;

＆＃13;