首页>>Jquery图片>>卡片式焦点图切换动画特效 单一图片切换效果(2019-05-17)

卡片式焦点图切换动画特效 单一图片切换效果

卡片式焦点图切换动画特效 单一图片切换效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1.   <div class="wrapper">  
  2. <div class="clash-card goblin">  
  3.   <div class="clash-card__image clash-card__image--goblin">  
  4.     <img src="img/goblin.png" alt="goblin" />  
  5.   </div>  
  6.   <div class="clash-card__level clash-card__level--goblin">Level 5</div>  
  7.   <div class="clash-card__unit-name">The Goblin</div>  
  8.   <div class="clash-card__unit-description">  
  9.     These pesky little creatures only have eyes for one thing: LOOT! They are faster than a Spring Trap, and their hunger for resources is limitless.  
  10.   </div>  
  11.   
  12.   <div class="clash-card__unit-stats clash-card__unit-stats--goblin clearfix">  
  13.     <div class="one-third">  
  14.       <div class="stat">30<sup>S</sup></div>  
  15.       <div class="stat-value">Training</div>  
  16.     </div>  
  17.   
  18.     <div class="one-third">  
  19.       <div class="stat">32</div>  
  20.       <div class="stat-value">Speed</div>  
  21.     </div>  
  22.   
  23.     <div class="one-third no-border">  
  24.       <div class="stat">100</div>  
  25.       <div class="stat-value">Cost</div>  
  26.     </div>  
  27.   
  28.   </div>  
  29.   
  30. </div> <!-- end clash-card goblin-->  
  31.  </div> <!-- end wrapper -->  

 

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

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_773.html