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