幻灯片/轮播

jQuery和CSS3堆叠式轮播图特效

面包多

jQuery和CSS3堆叠式轮播图特效-创客云
这是一款 jQuery 和 CSS3 堆叠式轮播图特效。该轮播图通过 css 将图片堆叠到一起,然后通过 jquery 代码来控制在切换时,不断的显示下一张图片。

使用方法

在头部引入 style.css 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="./css/style.css">

HTML 结构

  1. <div class="container">
  2.       <div class="card-stack">
  3.         <a class="buttons prev" href="#"><</a>
  4.         <ul class="card-list">
  5.           <li class="card" style="background: #c31432;  /* fallback for old browsers */
  6. background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
  7. background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  8. ">
  9.             <img src="https://svgshare.com/i/E90.svg" alt="Sun" class="card-list__image">
  10.  
  11.             <h3 class="card-list__text">Watch your way toward success as you excel above your competitors.  </h3>
  12.           </li>
  13.           <li class="card" style="background: #00416A;
  14. background: -webkit-linear-gradient(to right, #FFE000, #799F0C, #00416A);
  15. background: linear-gradient(to right, #FFE000, #799F0C, #00416A);
  16. ">
  17.             <img src="https://svgshare.com/i/E9H.svg" alt="Sun" class="card-list__image">
  18.  
  19.             <h3 class="card-list__text">Relax and chill, we've got you covered :) </h3>
  20.           </li>
  21.           <li class="card" style="background: #1e3c72;
  22. background: -webkit-linear-gradient(to right, #2a5298, #1e3c72);
  23. background: linear-gradient(to right, #2a5298, #1e3c72);
  24. ">
  25.             <img src="https://svgshare.com/i/E86.svg" alt="Sun" class="card-list__image">
  26.  
  27.             <h3 class="card-list__text">  Boost your social networking presence</h3>
  28.           </li>         
  29.  
  30.               <li class="card" style="background: #2C3E50;
  31. background: -webkit-linear-gradient(to right, #FD746C, #2C3E50);
  32. background: linear-gradient(to right, #FD746C, #2C3E50);
  33. ">
  34.                 <img src="https://svgshare.com/i/E8Y.svg" alt="Sun" class="card-list__image">
  35.  
  36.             <h3 class="card-list__text">  Be at the top of your competitors</h3>
  37.  
  38.           </li>
  39.           <li class="card" style="background: #373B44;
  40. background: -webkit-linear-gradient(to right, #4286f4, #373B44);
  41. background: linear-gradient(to right, #4286f4, #373B44);
  42. ">
  43.             <img src="https://svgshare.com/i/E9z.svg" alt="Sun" class="card-list__image">
  44.  
  45.             <h3 class="card-list__text">  Create contents for your online courses</h3>
  46.           </li>
  47.       </ul> 
  48.       <a class="buttons next" href="#">></a>
  49.     </div>
  50. </div>

javascript

  1. var $card = $('.card');
  2.     var lastCard = $(".card-list .card").length - 1;
  3.  
  4.     $('.next').click(function(){ 
  5.       var prependList = function() {
  6.         if( $('.card').hasClass('activeNow') ) {
  7.           var $slicedCard = $('.card').slice(lastCard).removeClass('transformThis activeNow');
  8.           $('ul').prepend($slicedCard);
  9.         }
  10.       }
  11.       $('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');
  12.       setTimeout(function(){prependList(); }, 150);
  13.     });
  14.  
  15.     $('.prev').click(function() {
  16.       var appendToList = function() {
  17.         if( $('.card').hasClass('activeNow') ) {
  18.           var $slicedCard = $('.card').slice(0, 1).addClass('transformPrev');
  19.           $('.card-list').append($slicedCard);
  20.         }}
  21.  
  22.           $('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');
  23.       setTimeout(function(){appendToList();}, 150);
  24.     });
(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

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

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