幻灯片/轮播

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)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!