幻灯片/轮播

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.     });
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

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

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