这是一款支持移动手机的响应式jquery轮播图插件。它具有跨平台,响应式,支持移动设备等特点,并且在使用CSS3制作过渡动画,效果非常炫酷。
使用方法
在页面中引入jquery,hammer.min.js和slider.js文件以及图标样式文件entypo.css和CSS3动画样式文件style.css。
<link href="path/to/css/style.css" rel="stylesheet"> <link href="path/to/css/entypo.css" rel="stylesheet"> <script src=""path/to/js/jquery.min.js"></script> <script src=""path/to/js/hammer.min.js"></script> <script src=""path/to/js/slider.js"></script>
HTML结构
该jquery轮播图的基本HTML结构如下:
<div class='o-sliderContainer hasShadow' id="yourId"> <div class='o-slider' id='pbSlider'> <div class="o-slider--item" data-image="images/5.jpg"> <div class="o-slider-textWrap"> <h1 class="o-slider-title">This is a title</h1> <span class="a-divider"></span> <h2 class="o-slider-subTitle">This is a sub title</h2> <span class="a-divider"></span> <p class="o-slider-paragraph"> This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p> </div> </div> <div class="o-slider--item" data-image="images/6.jpg"> <div class="o-slider-textWrap"> <h1 class="o-slider-title">This is a title</h1> <span class="a-divider"></span> <h2 class="o-slider-subTitle">This is a sub title</h2> <span class="a-divider"></span> <p class="o-slider-paragraph"> This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p> </div> </div> <div class="o-slider--item" data-image="images/1.jpg"> <div class="o-slider-textWrap"> <h1 class="o-slider-title">This is a title</h1> <span class="a-divider"></span> <h2 class="o-slider-subTitle">This is a sub title</h2> <span class="a-divider"></span> <p class="o-slider-paragraph"> This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p> </div> </div> <div class="o-slider--item" data-image="images/2.jpg"> <div class="o-slider-textWrap"> <h1 class="o-slider-title">This is a title</h1> <span class="a-divider"></span> <h2 class="o-slider-subTitle">This is a sub title</h2> <span class="a-divider"></span> <p class="o-slider-paragraph"> This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p> </div> </div> <div class="o-slider--item" data-image="images/3.jpg"> <div class="o-slider-textWrap"> <h1 class="o-slider-title">This is a title</h1> <span class="a-divider"></span> <h2 class="o-slider-subTitle">This is a sub title</h2> <span class="a-divider"></span> <p class="o-slider-paragraph"> This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p> </div> </div> <div class="o-slider--item" data-image="images/4.jpg"> <div class="o-slider-textWrap"> <h1 class="o-slider-title">This is a title</h1> <span class="a-divider"></span> <h2 class="o-slider-subTitle">This is a sub title</h2> <span class="a-divider"></span> <p class="o-slider-paragraph"> This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p> </div> </div> </div> </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该jquey轮播图插件。
$('#pbSlider0').pbTouchSlider({ slider_Wrap : '#yourId', // Assign a unique ID to the div.o-sliderContainer slider_Item : '.o-slider--item', // Single Item slider_Drag : true, // Your choise.. to dragIt or not to dragIt..this is the question... slider_Dots : { // Wanna see dots or not? class :'.o-slider-pagination', enabled : true }, slider_Arrows : { // Wanna see Arrows or not? class :'.o-slider-arrows', enabled : true }, slider_Threshold : 25, // Percentage of dragX before go to next/prev slider slider_Speed : 1000, slider_Ease : 'cubic-bezier(0.5, 0, 0.5, 1)', // see http://cubic-bezier.com/ slider_Breakpoints : { // Kind of media queries ( can add more if you know how to do it :D and if you need ) default : { height : 500 // height on desktop }, tablet : { height : 400, // height on tablet media : 1024 // tablet breakpoint }, smartphone : { height : 300, // height on smartphone media : 768 // smartphone breakpoint } } });
该jquey轮播图插件的github地址为:https://github.com/pirolab/pirolab.github.io
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!