幻灯片/轮播

sldr - 兼容手机IE8响应式幻灯片jquery插件

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

jquery.sldr.js 是一款兼容 IE8+和移动手机设备的响应式 jQuery 幻灯片插件。该幻灯片插件可以自适应图片宽度,提供丰富的回调函数,并且支持 Android 和 IOS 等移动触摸设备。它的特点还有:

灵活的设置,可定义前后导航按钮,分页导航按钮等

可设置多重幻灯片宽度,可见区域,并且完全响应式设计

在初始化时提供丰富的回调函数

可以通过编程在页面加载之后动态的添加图片

兼容 IE 7+, Chrome, Safari, Firefox, IOS 3+, Android 3+

使用方法:

在页面中引入 jquery 和 jquery.sldr.js 文件。

  1. <script src="js/jquery.min.js"></script>   
  2. <script src="js/stickyelements-animate.js"></script>

HTML 结构:

每一个幻灯片 slide 元素都需要一个唯一的 class 标识。

  1. <div id="SLDR-ONE" class="sldr">
  2.     <ul class="wrp animate">
  3.         <li class="elmnt-one">
  4.           <img src="img/Lake.jpg" width="1000" height="563">
  5.         </li>
  6.         <li class="elmnt-two">
  7.           <img src="img/Mountain-Range.jpg" width="1000" height="563">
  8.         </li>
  9.         <li class="elmnt-three">
  10.           <img src="img/Mt-Fuji.jpg" width="1000" height="563">
  11.         </li>
  12.         <li class="elmnt-four">
  13.           <img src="img/Pink-Forest.jpg" width="1000" height="563">
  14.         </li>
  15.     </ul>
  16. </div>

CSS 样式:

下面的 CSS 样式用于使幻灯片从左向右移动。

  1. .sldr {
  2.     max-width: 825px;
  3.     margin: 0 auto;
  4.     overflow: visible;
  5.     position: relative;
  6.     clear: both;
  7.     display: block;
  8. }
  9.  
  10. .sldr > ul.animate {
  11.     -webkit-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
  12.        -moz-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
  13.          -o-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
  14.             transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */   
  15. }
  16.  
  17. .sldr > ul > li {
  18.     float: left;
  19.     display: block;
  20.     width: 825px;
  21. }

初始化插件:

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

  1. $( window ).load( function() {
  2.  
  3.     $( '.sldr' ).each( function() {
  4.         var th = $( this );
  5.         th.sldr({
  6.             focalClass    : 'focalPoint',
  7.             offset        : th.width() / 2,
  8.             sldrWidth     : 'responsive',
  9.             nextSlide     : th.nextAll( '.sldr-nav.next:first' ),
  10.             previousSlide : th.nextAll( '.sldr-nav.prev:first' ),
  11.             selectors     : th.nextAll( '.selectors:first' ).find( 'li' ),
  12.             toggle        : th.nextAll( '.captions:first' ).find( 'div' ),
  13.             sldrInit      : sldrInit,
  14.             sldrStart     : sldrStart,
  15.             sldrComplete  : sldrComplete,
  16.             sldrLoaded    : sldrLoaded,
  17.             sldrAuto      : true,
  18.             sldrTime      : 2000,
  19.             hasChange     : true
  20.         });
  21.     });
  22. });

配置参数:

jquery.sldr.js 幻灯片的可用配置参数有:

参数描述
focalClass当前聚焦的 slide 的 class 名称,默认为:"focalPoint"。
offset居中的 slide 的位置,默认为$(this).width() / 2
selectors分页圆点的选择器,例如:$('ul > li'),无默认值。
toggle用于切换 focalClass 的一系列元素,可用于显示或隐藏标题,例如:$('.descriptions > div''),无默认值。
nextSlidenext slide 的选择器,无默认值。
previousSlideprevious slide 的选择器,无默认值。
hashChange可选的布尔值参数,用于传入回调函数。无默认值。
resizeDelay浏览器窗口尺寸改变的延迟时间,默认为 1。
sldrNumber在插件初始化时幻灯片数量的增量,默认为 0。
sldrInit回调函数,接收函数名称。当 sldr 初始化后被 DOM 管理之前触发。
sldLoaded回调函数,接收函数名称。当某个幻灯片被加载后触发。
sldrLoaded回调函数,接收函数名称。当幻灯片被完全加载,并被 DOM 管理之后触发。
sldrStart回调函数,接收函数名称。当幻灯片 slide 被聚焦前触发。
sldrComplete回调函数,接收函数名称。当幻灯片 slide 被聚焦后触发。
sldrWidth幻灯片的宽度。设置为"responsive"表示全屏宽度。如果要设置固定宽度可以设置一个具体的数值。
animate接收函数名称。自定义动画。默认为 jquery.sldr.js 中的"base.animate"。
animateJquery强制使用 jquery animate()动画。默认为 flase,使用的是 CSS transitions 动画。浏览器不支持 CSS transitions 时使用 jQuery 动画。
sldrAuto动画过渡的自动定时器。默认为 false。
sldrTime动画过渡的时间。默认为 8000。
isBrowser为浏览器设置的变量,默认为 navigator.userAgent。
isIE为 IE 浏览器设置的变量。默认为 flase,将根据 navigator.userAgent 来设置。

回调函数:

  1. /**
  2.  * When the sldr is initiated, before the DOM is manipulated
  3.  * @param {object} args the slides, callback, and config of the slider
  4.  * @return null
  5.  **/
  6. function sldrInt( args ) { }
  7.  
  8. /**
  9.  * When individual slides are loaded
  10.  * @param {object} args the slides, callback, and config of the slider
  11.  * @return null
  12.  **/
  13. function sldLoaded( args ) { }
  14.  
  15. /**
  16.  * When the full slider is loaded, after the DOM is manipulated
  17.  * @param {object} args the slides, callback, and config of the slider
  18.  * @return null
  19.  **/
  20. function sldrLoaded( args ) { }
  21.  
  22. /**
  23.  * Before the slides change focal points
  24.  * @param {object} args the slides, callback, and config of the slider
  25.  * @return null
  26.  **/
  27. function sldrStart( args ) { }
  28.  
  29. /**
  30.  * After the slides are done changing focal points
  31.  * @param {object} args the slides, callback, and config of the slider
  32.  * @return null
  33.  **/
  34. function sldrComplete( args ) { }

回调参数:

回调函数会返回一个带下列项目的对象。

  1. { 
  2.     'slides' : { 
  3.         (array of slides) 
  4.     }, 
  5.     'callback' : {
  6.         (the previous, current, next slide variables)
  7.     }, 
  8.     'config' : {
  9.         (all of the original settings described above) 
  10. }

Slides:

sldSlide jQuery object
slideNumSlide number
idSlide id
class_nameSlide class
htmlSlide inner html()

Callback:

sldr幻灯片的 jQuery 对象
prevFocalIndex前一个 slide 的 index()
prevSlideNum前一个 slide 的号码
currentFocalIndex当前 slide 的 index()
currentClass当前 slide 的 class 名称
currentID当前 slide 的 id
currentFocalPoint从幻灯片左边到中间的像素距离
currentSlideNum当前 slide 的号码
shiftWidth从一个 slide 切换到下一个 slide 的数量
nextFocalIndex下一个 slide 的 index()
nextSlideNum下一个 slide 的号码

post load image 特性可以在页面加载之后逐一的加载图片。你需要根据下面的 HTML 结构,为每一个幻灯片元素添加一个 sldr-load 的 class,然后插件就会根据 'class' , 'src' , 'alt' , 'title' , 'width' 或 'height'这些属性来加载所需要的图片。

  1. <div id="SLDR-ONE" class="sldr">
  2.     <ul class="wrp animate">
  3.         <li class="elmnt-one">
  4.           <div class="sldr-load" src="img/Lake.jpg" width="1000" height="563"></div>
  5.         </li>
  6.         <li class="elmnt-two">
  7.           <div class="sldr-load" src="img/Mountain-Range.jpg" width="1000" height="563"></div>
  8.         </li>
  9.         <li class="elmnt-three">
  10.           <div class="sldr-load" src="img/Mt-Fuji.jpg" width="1000" height="563"></div>
  11.         </li>
  12.         <li class="elmnt-four">
  13.           <div class="sldr-load" src="img/Pink-Forest.jpg" width="1000" height="563"></div>
  14.         </li>
  15.     </ul>
  16. </div>

github 地址:https://github.com/devowhippit/jquery.sldr

(0)

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

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

嘿,欢迎咨询!