滑块开始更改项目时添加寻呼机活动类

Question

我找到了this fiddle

我的任务非常类似，只有一个问题，你现在看到第一个项目有活动类但是当滑块自动启动活动类没有添加到下一个或上一个项目时，只有当你点击左项目时在这种情况下，它接收活动类。所以我想在滑块自动旋转时为每个当前项添加活动类。

$(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，那么你可以使用像

这样的回调

＆＃13;

＆＃13;

// we will build a new event
// once for initing a new event "lastchange"
$("textarea").each(function () {
    var timer = null;
    $(this).change(function(){
        var node = this;
        if(timer != null)
            clearTimeout(timer);

        timer = setTimeout(function(){
             $(node).trigger('lastchange');
        }, 1000);
    });
});


// use custom event
$("textarea#qr_data").bind("lastchange", function (e) {
    console.log($(this).val(), e);
});

＆＃13;

$(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');

  });
});

＆＃13;

    #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;
    }

＆＃13;

＆＃13;

＆＃13;