超炫游戏角色介绍jQuery幻灯片特效

<div class="slider__warpper">

  <div class="flex__container flex--pikachu flex--active" data-slide="1">

    <div class="flex__item flex__item--left">

      <div class="flex__content">

        <p class="text--sub">子标题</p>

        <h1 class="text--big">角色名称</h1>

        <p class="text--normal">描述信息</p>

      </div>

      <p class="text__background">Pikachu</p>

    </div>

    <div class="flex__item flex__item--right"></div>

    <!--人物图片-->

    <img class="pokemon__img" src="https://s20.postimg.org/efpniu8m5/pikachu.png" />

  </div>

  ......

</div>

<!--幻灯片导航按钮-->

<div class="slider__navi">

  <a href="#" class="slide-nav active" data-slide="1">pikachu</a>

  <a href="#" class="slide-nav" data-slide="2">piplup</a>

  <a href="#" class="slide-nav" data-slide="3">blaziken</a>

  <a href="#" class="slide-nav" data-slide="4">dialga</a>

  <a href="#" class="slide-nav" data-slide="5">zekrom</a>

</div>

$('.slide-nav').on('click', function(e) {

  e.preventDefault();

  // get current slide

  var current = $('.flex--active').data('slide'),

    // get button data-slide

    next = $(this).data('slide');

  $('.slide-nav').removeClass('active');

  $(this).addClass('active');

  if (current === next) {

    return false;

  } else {

    $('.slider__warpper').find('.flex__container[data-slide=' + next + ']').addClass('flex--preStart');

    $('.flex--active').addClass('animate--end');

    setTimeout(function() {

      $('.flex--preStart').removeClass('animate--start flex--preStart').addClass('flex--active');

      $('.animate--end').addClass('animate--start').removeClass('animate--end flex--active');

    }, 800);

  }

});