用jQuery位置更改CSS

Question

如果滑块（#mySlider）处于某个位置或其对应的幻灯片，如何使按钮（var selectSlide）具有不同的背景颜色。

我有以下jQuery：

var slideWidth = $('#mySliderContainer').width();
var selectSlide = $('.selection')

function currentButton() {

  if ($('#mySlider').position().left == 0) {
    selectSlide.eq(0).css('background', '#6F6F6F');
  } else {
    selectSlide.eq(0).css('background', '#D6D6D6');
  }
  if ($('#mySlider').position().left == -slideWidth) {
    selectSlide.eq(1).css('background', '#6F6F6F');
  } else {
    selectSlide.eq(1).css('background', '#D6D6D6');
  }
  if ($('#mySlider').position().left == -slideWidth * 2) {
    selectSlide.eq(2).css('background', '#6F6F6F');
  } else {
    selectSlide.eq(2).css('background', '#D6D6D6');
  }
  if ($('#mySlider').position().left == -slideWidth * 3) {
    selectSlide.eq(3).css('background', '#6F6F6F');
  } else {
    selectSlide.eq(3).css('background', '#D6D6D6');
  }

}

jQuery的链接位于jsFiddle上

我是否需要在jQuery中再次调用该函数才能起作用？ 我可能忽略了一些简单的事情。

Answer 1

问题是您正在检查动画在移动时的左侧位置，因此不会匹配。

一种可能的解决方案是在单独更新的变量中跟踪活动幻灯片。

左右移动幻灯片可以包含以下代码：

activeSlide = (activeSlide+1) % slideCountWidth;

和

activeSlide = (activeSlide-1) % slideCountWidth;

那处理包裹。 直接单击幻灯片可以将当前幻灯片直接设置为单击的任何内容。

小提琴示例： http : //jsfiddle.net/uhtxtnks/50/