幻灯片/轮播

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

创客主机


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

HTML结构:

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

  1. <div class="slider__warpper">
  2.   <div class="flex__container flex--pikachu flex--active" data-slide="1">
  3.     <div class="flex__item flex__item--left">
  4.       <div class="flex__content">
  5.         <p class="text--sub">子标题</p>
  6.         <h1 class="text--big">角色名称</h1>
  7.         <p class="text--normal">描述信息</p>
  8.       </div>
  9.       <p class="text__background">Pikachu</p>
  10.     </div>
  11.     <div class="flex__item flex__item--right"></div>
  12.     <!--人物图片-->
  13.     <img class="pokemon__img" src="https://s20.postimg.org/efpniu8m5/pikachu.png" />
  14.   </div>
  15.   ......
  16. </div>
  17. <!--幻灯片导航按钮-->
  18. <div class="slider__navi">
  19.   <a href="#" class="slide-nav active" data-slide="1">pikachu</a>
  20.   <a href="#" class="slide-nav" data-slide="2">piplup</a>
  21.   <a href="#" class="slide-nav" data-slide="3">blaziken</a>
  22.   <a href="#" class="slide-nav" data-slide="4">dialga</a>
  23.   <a href="#" class="slide-nav" data-slide="5">zekrom</a>
  24. </div>

JavaScript:

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

  1. $('.slide-nav').on('click', function(e) {
  2.   e.preventDefault();
  3.   // get current slide
  4.   var current = $('.flex--active').data('slide'),
  5.     // get button data-slide
  6.     next = $(this).data('slide');
  7.  
  8.   $('.slide-nav').removeClass('active');
  9.   $(this).addClass('active');
  10.  
  11.   if (current === next) {
  12.     return false;
  13.   } else {
  14.     $('.slider__warpper').find('.flex__container[data-slide=' + next + ']').addClass('flex--preStart');
  15.     $('.flex--active').addClass('animate--end');
  16.     setTimeout(function() {
  17.       $('.flex--preStart').removeClass('animate--start flex--preStart').addClass('flex--active');
  18.       $('.animate--end').addClass('animate--start').removeClass('animate--end flex--active');
  19.     }, 800);
  20.   }
  21. });
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!