呼应式无限轮播jQuery旋转木马插件

导语 Skidder是一款呼应式无限轮播的jQuery旋转木马插件。它能够主动将图片居中对齐,组成首尾相接的一组图片,经过导航按钮或移动接触滑动来前后切换图片。它的特色还有:图片主动居中对齐。无限循环轮播。呼应式规划
博学谷

Skidder是一款呼应式无限轮播的 jQuery旋转木马插件。它能够主动将图片居中对齐,组成首尾相接的一组图片,经过导航按钮或移动接触滑动来前后切换图片。它的特色还有:
  • 图片主动居中对齐。
  • 无限循环轮播。
  • 呼应式规划,图片主动习惯窗口巨细。
  • 能够在移动设备上接触滑动。
  • 兼容IE8+的IE阅览器。

运用方法

运用该旋转木马插件需要在页面中引进jquery.skidder.css和jquery,以及jquery.skidder.js文件。

  1. <link rel="stylesheet" href="path/to/jquery.skidder.css"> 
  2. <script src="path/to/jquery.skidder.js"></script> 
  3. <script src="path/to/jquery.skidder.js"></script>   
 HTML结构

该旋转木马的根本HTML结构如下:

  1. <div class="slideshow" style="display: none;"> 
  2.   <div class="slide"><img src="1.jpg"></div> 
  3.   <div class="slide"><img src="2.jpg"></div> 
  4.   <div class="slide"><img src="3.jpg"></div> 
  5. </div>    

 初始化插件

在页面DOM元素加载完毕之后,经过skidder()方法来初始化该旋转木马插件。

  1. $('.slideshow').skidder(); 

 

要保证图片在插件初始化之前就被悉数加载,不然不能正确的核算图片的高度。能够运用imagesloaded.js来完结这项作业。

  1. $('.slideshow').each( function() { 
  2.   var $slideshow = $(this); 
  3.   $slideshow.imagesLoaded( function() { 
  4.     $slideshow.skidder(); 
  5.   }); 
  6. });   

 

要动态改动图片的尺度巨细,插件中运用了第三方的smartresize:

  1. $(window).smartresize(function(){ 
  2.   $('.slideshow').skidder('resize'); 
  3. });  

 

 装备参数

Skidder旋转木马插件的装备参数如下:

参数 描绘
slideClass slide元素的class称号。默以为".slide"
animationType 该插件支撑CSS动画和jQuery动画。可选值为: 'animate', 'css'。默认值为 'animate'
lazyLoad 懒加载,默认值为false
lazyLoadAutoInit 默认值为true
lazyLoadWindow 默认值为1
scaleSlides 是否依据maxWidth, maxHeight和scaleTo参数缩放slide为一致的值。默以为true。
scaleTo 界说缩放方式。有2种方式:最小方式和呼应式方式。可选值为:"smallest"和[x, y]。"smallest"表明高度最小的图片肯定幻灯片的高度。[x, y]表明运用一个数组中的两个数值来界说幻灯片的份额。默以为"smallest"方式。
maxWidth 现在幻灯片的最大宽度,0或"none"表明不约束。默以为800
maxHeight 现在幻灯片的最大高度,0或"none"表明不约束。默以为500
preservePortrait 在呼应式方式中该参数有用。决议小于份额的图片的填充方式。true表明习惯视口高度,水平方向上留空白。默以为false。
paging 设置为true时,插件会查找pagingElement元素的包裹元素pagingWrapper来设置padding。假如这两个元素不存在,插件会主动创立它们。默以为true。
pagingWrapper 分页圆点的包裹元素,默以为'.skidder-pager'
pagingElement 分页圆点元素,默以为'.skidder-pager-dot'
swiping 是否在移动接触设备上答应swiping。默以为true
leftaligned 假如不期望幻灯片居中,设置为true,默以为false
cycle 是否循环显现,默以为true。
jumpback 在非循环方式时,最终一张幻灯片会显现'return to first slide'箭头。默以为false
speed 过渡动画的速度,默以为400
autoplay 是否总播映,默以为false
autoplayResume 是否在互动后康复主动播映,默以为false
interval 主动播映的时刻距离,默以为4000
transition 过渡动画作用,'slide' 或 'fade'
directionClasses 在过渡动画完毕后为slides增加 'left-from-active' 和 'right-from-active' class类。
afterSliding 旋转木马改动后的回调函数
afterInit 旋转木马初始化后的回调函数
afterResize 旋转木马尺度改动时的回调函数

http://www.nucmc.com/ true 呼应式无限轮播jQuery旋转木马插件 http://www.nucmc.com/show-79-817-1.html report 4693.5 Skidder是一款呼应式无限轮播的jQuery旋转木马插件。它能够主动将图片居中对齐,组成首尾相接的一组图片,经过导航按钮或移动接触滑动来前后切换图片。它的特色还有:图片主动居中对齐。无限循环轮播。呼应式规划
TAG:呼应式 jQuery 插件
本站欢迎任何方式的转载,但请有必要注明出处,尊重别人劳动成果
转载请注明: 文章转载自:BETWAY官网网 http://www.nucmc.com/show-79-817-1.html
BETWAY官网网 Copyright 2012-2014 www.nucmc.com All rights reserved.(晋ICP备13001436号-1)