这是一款使用jQuery和CSS3制作的超炫游戏角色介绍jQuery幻灯片特效。该幻灯片使用flexbox来进行布局，以垂直切换幻灯片的方式来展示游戏人物的图片和角色信息。

使用方法

HTML结构

该游戏角色介绍jQuery幻灯片特效的HTML结构如下：

  

    

      

        
子标题
        
角色名称
        
描述信息
      
      
Pikachu
    
    

    
    
  
  ......



  pikachu
  piplup
  blaziken
  dialga
  zekrom
 
                

JavaScript

特效中使用jQuery来监听导航按钮的点击事件，为相应的幻灯片添加和移除class类。

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