javascript - 带有事件点的 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

我更改了您的一些代码，请看一下:

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);
});

.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;
}

<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>

还有 JS Fiddle 演示: http://jsfiddle.net/Vy33z/105/