幻灯片/轮播

jQuery+CSS3卡片轮播游戏人物设计效果

面包多

这是一款效果非常炫酷的 jQuery 和 CSS3 带轮播效果的游戏人物卡片设计效果。该游戏人物卡片通过背景图片的切换来显示不同的人物效果,轮播效果通过 slick 幻灯片插件来制作。

使用方法:

使用该游戏人物卡片需要引入 slick 幻灯片插件的相关文件。

也想出现在这里?联系我们
创客主机
  1. <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
  2. <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css'>
  3. <script src='js/jquery.min.js'></script>
  4. <script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>

HTML 结构:

每一张游戏卡片都使用下面的 HTML 结构来制作,不同的卡片使用不同的图片。

  1. <div class="wrapper">
  2. <div class="clash-card barbarian">
  3.   <div class="clash-card__image clash-card__image--barbarian">
  4.     <img src="img/barbarian.png" alt="barbarian" />
  5.   </div>
  6.   <div class="clash-card__level clash-card__level--barbarian">Level 4</div>
  7.   <div class="clash-card__unit-name">The Barbarian</div>
  8.   <div class="clash-card__unit-description">
  9.     <!-- 描述文本 -->
  10.   </div>
  11.  
  12.   <div class="clash-card__unit-stats clash-card__unit-stats--barbarian clearfix">
  13.     <div class="one-third">
  14.       <div class="stat">20<sup>S</sup></div>
  15.       <div class="stat-value">Training</div>
  16.     </div>
  17.  
  18.     <div class="one-third">
  19.       <div class="stat">16</div>
  20.       <div class="stat-value">Speed</div>
  21.     </div>
  22.  
  23.     <div class="one-third no-border">
  24.       <div class="stat">150</div>
  25.       <div class="stat-value">Cost</div>
  26.     </div>
  27.  
  28.   </div>
  29.  
  30. </div> <!-- end clash-card barbarian-->

卡片的效果截图如下:
jQuery+CSS3卡片轮播游戏人物设计效果-创客云

JavaScript:

在页面加载完毕之后,通过 slick()方法来初始化 slick 幻灯片插件。然后在幻灯片切换的时候,对.slide-container 容器做事件监听,并显示和隐藏相应的图片。

  1. (function() {
  2.  
  3.   var slideContainer = $('.slide-container');
  4.  
  5.   slideContainer.slick();
  6.  
  7.   $('.clash-card__image img').hide();
  8.   $('.slick-active').find('.clash-card img').fadeIn(200);
  9.  
  10.   // On before slide change
  11.   slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  12.     $('.slick-active').find('.clash-card img').fadeOut(1000);
  13.   });
  14.  
  15.   // On after slide change
  16.   slideContainer.on('afterChange', function(event, slick, currentSlide) {
  17.     $('.slick-active').find('.clash-card img').fadeIn(200);
  18.   });
  19.  
  20. })();
(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

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

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

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