幻灯片/轮播

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''),无默认值。
nextSlide next slide 的选择器,无默认值。
previousSlide previous 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:

sld Slide jQuery object
slideNum Slide number
id Slide id
class_name Slide class
html Slide 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)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

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

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

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