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