使用 jQuery Data 检测活动幻灯片并运行函数

Question

您好，我正在使用 jQuery 进行自定义导航，但我不知道如何检测活动幻灯片并将活动状态应用于该幻灯片的按钮。

我设置了一个 jsfiddle 以更好地显示我正在尝试做的事情，基本上与滑块中的点/分页器功能相同，但在按钮 1 2 和 3 上。

我不熟悉 jQuery 的 .data 部分：P

http://jsfiddle.net/unknown601/yxErC/17/

<div class="number" id="" data-slider="0">
  Button 1
</div>
<div class="number" id="" data-slider="1">
  Button 2
</div>
<div class="number" id="" data-slider="2">
  Button 3
</div>

<ul class="slider">
  <li data-current="1">
    <img src="http://placehold.it/350x150">
    <p>Slider-1</p>
  </li>

  <li data-current="2">
    <img src="http://placehold.it/350x150">
    <p>Slide 2</p>
  </li>

  <li data-current="3">
    <img src="http://placehold.it/350x150">
    <p> Slide 3</p>
  </li>

</ul>



   #current {
  color: red;
  font-weight: bold;
}

.number:hover {
  color: blue;
  cursor: pointer;
}

有按钮来控制滑块:)

var Slider;

$(document).ready(function() {
  Slider = $('.slider').bxSlider({
    pager: true
  });
  $('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');
    Slider.goToSlide(index);
  });
});

Answer 1

Working fiddle.

您可以为单击的按钮添加类并将其从单击事件中的其他按钮中删除：

$('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');

    $('.number').removeClass('active'); //Remove class active from all buttons
    $(this).addClass('active'); //Add active class to the clicked one

    Slider.goToSlide(index);
});

因为您正试图让与幻灯片相关的按钮处于活动状态，所以您可以使用 onSlideBefore() 回调到基于 data-slider 的按钮的活动类 add/remove ：

Slider = $('.slider').bxSlider({
  pager: true,
  onSlideBefore: function($slideElement, oldIndex, newIndex) {
      $('.number').removeClass('active');
      $('.number[data-slider="'+newIndex+'"]').addClass('active');
  }
});

希望这会有所帮助。

Answer 2

您要自定义“上一页/下一页”按钮吗？如果是这样，您可以通过调用getCurrentSlide() 获取当前（“活动”）页面。查看http://bxslider.com/option 上的文档以获取详细信息。 如果您只想在幻灯片之外进行导航控制，bxslider 页面上有一个示例：http://bxslider.com/examples/custom-next-prev-selectors

Answer 3

试试：

var Slider;
var minState = 0;
var maxState = 2;
var currState = 0;

$(document).ready(function() {
  Slider = $('.slider').bxSlider({
    pager: true
  });

  var changeActiveLink = function() {
    $('.active').removeClass('active');
    $('.number[data-slider='+currState+']').addClass('active');
  }
  $('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');
    Slider.goToSlide(index);
    currState = index;
    changeActiveLink();
  });
  $('.bx-pager-link').on('click', function(e){
    e.preventDefault();
    var activeButton = $(this).data('slide-index');
    currState = activeButton;
    changeActiveLink();
  });
  $('.bx-next').on('click', function(e){
    e.preventDefault();
    if(currState == maxState) {
        currState = 0;
    } else {
        currState++;
    }
    changeActiveLink();
  });
  $('.bx-prev').on('click', function(e){
    e.preventDefault();
    if(currState == 0) {
        currState = maxState;
    } else {
        currState--;
    }
    changeActiveLink();
  })

});

http://jsfiddle.net/yxErC/32/