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/

用jQuery位置改变CSS

1 个答案: