幻灯片/轮播

支持移动手机响应式轮播图jQuery插件

阿里云


这是一款支持移动手机的响应式 jquery 轮播图插件。它具有跨平台,响应式,支持移动设备等特点,并且在使用 CSS3 制作过渡动画,效果非常炫酷。

使用方法:

在页面中引入 jquery,hammer.min.js 和 slider.js 文件以及图标样式文件 entypo.css 和 CSS3 动画样式文件 style.css。

也想出现在这里?联系我们
创客主机
  1. <link href="path/to/css/style.css" rel="stylesheet">
  2. <link href="path/to/css/entypo.css" rel="stylesheet">
  3. <script src=""path/to/js/jquery.min.js"></script>
  4. <script src=""path/to/js/hammer.min.js"></script>
  5. <script src=""path/to/js/slider.js"></script>

HTML 结构:

该 jquery 轮播图的基本 HTML 结构如下:

  1. <div class='o-sliderContainer hasShadow' id="yourId">
  2.     <div class='o-slider' id='pbSlider'>
  3.       <div class="o-slider--item" data-image="images/5.jpg">
  4.         <div class="o-slider-textWrap">
  5.           <h1 class="o-slider-title">This is a title</h1>
  6.           <span class="a-divider"></span>
  7.           <h2 class="o-slider-subTitle">This is a sub title</h2>
  8.           <span class="a-divider"></span>
  9.           <p class="o-slider-paragraph">
  10.           This is a sub paragraph This is a sub paragraph 
  11.           This is a sub paragraph This is a sub paragraph 
  12.           This is a sub paragraph This is a sub paragraph 
  13.           This is a sub paragraph </p>
  14.         </div>        
  15.       </div>
  16.       <div class="o-slider--item" data-image="images/6.jpg">
  17.         <div class="o-slider-textWrap">
  18.           <h1 class="o-slider-title">This is a title</h1>
  19.           <span class="a-divider"></span>
  20.           <h2 class="o-slider-subTitle">This is a sub title</h2>
  21.           <span class="a-divider"></span>
  22.           <p class="o-slider-paragraph">
  23.           This is a sub paragraph This is a sub paragraph 
  24.           This is a sub paragraph This is a sub paragraph 
  25.           This is a sub paragraph This is a sub paragraph 
  26.           This is a sub paragraph </p>
  27.         </div>
  28.       </div>
  29.       <div class="o-slider--item" data-image="images/1.jpg">
  30.         <div class="o-slider-textWrap">
  31.           <h1 class="o-slider-title">This is a title</h1>
  32.           <span class="a-divider"></span>
  33.           <h2 class="o-slider-subTitle">This is a sub title</h2>
  34.           <span class="a-divider"></span>
  35.           <p class="o-slider-paragraph">
  36.           This is a sub paragraph This is a sub paragraph 
  37.           This is a sub paragraph This is a sub paragraph 
  38.           This is a sub paragraph This is a sub paragraph 
  39.           This is a sub paragraph </p>
  40.         </div>
  41.       </div>
  42.       <div class="o-slider--item" data-image="images/2.jpg">
  43.         <div class="o-slider-textWrap">
  44.           <h1 class="o-slider-title">This is a title</h1>
  45.           <span class="a-divider"></span>
  46.           <h2 class="o-slider-subTitle">This is a sub title</h2>
  47.           <span class="a-divider"></span>
  48.           <p class="o-slider-paragraph">
  49.           This is a sub paragraph This is a sub paragraph 
  50.           This is a sub paragraph This is a sub paragraph 
  51.           This is a sub paragraph This is a sub paragraph 
  52.           This is a sub paragraph </p>
  53.         </div>
  54.       </div>
  55.       <div class="o-slider--item" data-image="images/3.jpg">
  56.         <div class="o-slider-textWrap">
  57.           <h1 class="o-slider-title">This is a title</h1>
  58.           <span class="a-divider"></span>
  59.           <h2 class="o-slider-subTitle">This is a sub title</h2>
  60.           <span class="a-divider"></span>
  61.           <p class="o-slider-paragraph">
  62.           This is a sub paragraph This is a sub paragraph 
  63.           This is a sub paragraph This is a sub paragraph 
  64.           This is a sub paragraph This is a sub paragraph 
  65.           This is a sub paragraph </p>
  66.         </div>
  67.       </div>
  68.       <div class="o-slider--item" data-image="images/4.jpg">
  69.         <div class="o-slider-textWrap">
  70.           <h1 class="o-slider-title">This is a title</h1>
  71.           <span class="a-divider"></span>
  72.           <h2 class="o-slider-subTitle">This is a sub title</h2>
  73.           <span class="a-divider"></span>
  74.           <p class="o-slider-paragraph">
  75.           This is a sub paragraph This is a sub paragraph 
  76.           This is a sub paragraph This is a sub paragraph 
  77.           This is a sub paragraph This is a sub paragraph 
  78.           This is a sub paragraph </p>
  79.         </div>
  80.       </div>
  81.     </div>
  82.   </div>

初始化插件:

在页面 DOM 元素加载完毕之后,可以通过下面的方法来初始化该 jquey 轮播图插件。

  1. $('#pbSlider0').pbTouchSlider({
  2.     slider_Wrap : '#yourId', // Assign a unique ID to the div.o-sliderContainer
  3.     slider_Item : '.o-slider--item', // Single Item
  4.     slider_Drag : true, // Your choise.. to dragIt or not to dragIt..this is the question...
  5.     slider_Dots : { // Wanna see dots or not?
  6.       class :'.o-slider-pagination',
  7.       enabled : true
  8.     },
  9.     slider_Arrows : { // Wanna see Arrows or not?
  10.       class :'.o-slider-arrows',
  11.       enabled : true
  12.     },
  13.     slider_Threshold : 25, // Percentage of  dragX before go to next/prev slider
  14.     slider_Speed : 1000,
  15.     slider_Ease : 'cubic-bezier(0.5, 0, 0.5, 1)',  // see http://cubic-bezier.com/
  16.     slider_Breakpoints : { // Kind of media queries ( can add more if you know how to do it :D and if you need )
  17.         default : {
  18.             height : 500 //  height on desktop
  19.         },
  20.         tablet : {
  21.             height : 400, // height on tablet
  22.             media : 1024 // tablet breakpoint
  23.         },
  24.         smartphone : {
  25.             height : 300, // height on smartphone
  26.             media : 768 // smartphone breakpoint
  27.         }
  28.     }
  29. });

Github 地址:https://github.com/pirolab/pirolab.github.io

支持移动手机响应式轮播图 jQuery 插件

已有 478 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

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