javascript - 当 slider 开始更改项目时添加寻呼机事件类

Question

我找到了this fiddle

这与我的任务非常相似，只是有一个问题，您现在如何看到第一个项目具有事件类，但是当 slider 自动启动时，事件类不会添加到下一个或上一个项目，只有当您单击每个左侧项目时在这种情况下，它接收事件类。所以我想在 slider 自动旋转时向每个当前项目添加事件类。

$(function() {

    var slider = $('#banner-slider').bxSlider({
        controls: true,
        mode: 'vertical',
        auto: true,
        pager:true
    });

    $('.banner-pager a').click(function() {
        var thumbIndex = $('..banner-pager a').index(this);
        slider.goToSlide(thumbIndex);

        $('.banner-pager a').removeClass('pager-active');
        $(this).addClass('pager-active');
        return false;
    });

    $('.banner-pager a:first').addClass('pager-active');

});

Answer 1

如果您可以升级到较新版本的 bxslider，那么您可以使用类似的回调

$(function() {
  $(function() {
    var $as = $('.banner-pager a');

    // assign the slider to a variable
    var slider = $('#banner-slider').bxSlider({
      controls: true,
      mode: 'vertical',
      auto: true,
      pager: true,
      onSlideAfter: function($el, pidx, idx) {
        $as.eq(pidx).removeClass('pager-active');
        $as.eq(idx).addClass('pager-active');
      }
    });

    $as.click(function() {
      var thumbIndex = $as.index(this);
      slider.goToSlide(thumbIndex);
      return false;
    });

    // assign "pager-active" class to the first thumb
    $('.banner-pager a:first').addClass('pager-active');

  });
});

    #banner {
      height: 294px;
      width: 100%;
      position: relative;
      background: #e5e5e5;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .banner-nav {
      max-width: 260px;
      width: auto;
      height: 294px;
      float: left;
      position: relative;
      background: #cccccc;
      position: absolute;
    }
    .banner-pager a {
      width: 220px;
      display: block;
      float: left;
      height: 18px;
      padding: 12px 20px;
      color: #111;
      text-decoration: none;
    }
    .banner-pager a.pager-active,
    .banner-pager a:hover {
      background: #e5e5e5;
      text-decoration: underline;
    }
    .banner-wrap {
      float: left;
      height: 294px;
      padding-left: 260px;
    }
    .banner-slide {
      height: 294px;
      width: 720px;
    }

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>

<div id="banner">
  <div class="banner-nav">
    <div class="banner-pager">
      <a href="">Dubery Wotsit</a>
      <a href="">Laterz on a'menjey</a>
      <a href="">Joben</a>
      <a href="">Tukka Tukka</a>
      <a href="">Horse Hair Duvet</a>
      <a href="">FML</a>
      <a href="">Balls Deep</a>

    </div>
  </div>
  <div class="banner-wrap">
    <ul id="banner-slider">
      <li style="background: #FF0000;">
        <div class="banner-slide">Dubery Wotsit</div>
      </li>
      <li style="background: #FF8000;">
        <div class="banner-slide">Laterz on a'menjey</div>
      </li>
      <li style="background: #FFFF00;">
        <div class="banner-slide">Joben</div>
      </li>
      <li style="background: #80FF00;">
        <div class="banner-slide">Tukka Tukka</div>
      </li>
      <li style="background: #00FF00;">
        <div class="banner-slide">Horse Hair Duvet</div>
      </li>
      <li style="background: #00FF80;">
        <div class="banner-slide">FML</div>
      </li>
      <li style="background: #00FFFF;">
        <div class="banner-slide">Balls Deep</div>
      </li>
    </ul>
  </div>
</div>