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