javascript – 使用jQuery Data检测活动幻灯片和运行功能

2023年4月17日 199次阅读

您好我使用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);
  });
});

最佳答案
Working fiddle.

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

$('.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()回调来基于数据滑块向活动类添加/删除活动类：

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

这有帮助.

点赞