幻灯片/轮播

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

面包多

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

HTML 结构:

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

也想出现在这里?联系我们
WordPress 主题
  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)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!