html幻灯片图片轮播w3,支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件

jssor slider是一款功能非常强大的可制作超过30种不同类型的幻灯片|轮播图|旋转木马的jQuery插件。jssor具有高性能，轻量级，跨浏览器等特点，它可以支持IE6+的浏览器，并且可以支持移动触摸设备。它的特点还有：

轻量级，压缩版本只有17KB大小。

高性能，通过消耗很少的CPU来完成平滑过渡效果。

跨浏览器支持：IE6+, Chrome 3+, Firefox 3.6+, Safari 3.1+, Opera 10+。

可以作为jQuery插件来使用，也可以通过纯JavaScript来使用。

支持移动触摸和拖拽。

实时响应式，缩放没有延迟。

390+种不同的标题和动画过渡效果。

360+种slideshow效果。

自动侦测来完成水平或垂直切换图片。

可以制作带缩略图，tabs和圆点导航的效果。

任何的HTML代码都可以放置在slider中。

一个页面可以实例化多个slider。

使用方法

使用该幻灯片插件需要引入jquery和jssor.slider.mini.js文件(纯JavsScript版本只需要引入jssor.slider.mini.js文件)。

HTML结构

最简单的幻灯片结构如下：

jQuery版本的幻灯片结构：

纯JavaScript版本的幻灯片结构：

初始化插件

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

jQuery版本：

jQuery(document).ready(function ($) {

var options = { $AutoPlay: true };

var jssor_slider1 = new $JssorSlider$('slider1_container', options);

});

纯JavaScript版本：

jssor_slider1_starter = function (containerId) {

var options = { $AutoPlay: true };

var jssor_slider1 = new $JssorSlider$(containerId, options);

};

配置参数

Jssor Slider的可用配置参数如下：

参数

是否必须

默认值

描述

$FillMode

可选

0

slide中填充图片的模式：0表示stretch(拉伸)，1表示contain(保持比例并全部放入slide中)，2表示cover(保持比例边覆盖整个slide)，4表示实际尺寸，5表示包含一个大图和一个实际尺寸的小图。

$LazyLoading

可选

1

图片懒加载模式，默认图片在slide到来时才加载，可以设置一个整数(1,2,3等)表示距离该图片多少张图片间隔时就加载图片。

$StartIndex

可选

0

初始化时显示的图片的序号。

$AutoPlay

可选

false

是否自动播放，对于slideshow，该参数必须设置为true。

$AutoPlaySteps

可选

1

自动播放的步长，可以为正数或负数。

$Loop

可选

1

旋转木马是否无限循环。0表示停止，1表示循环，2表示rewind

$Idle

可选

3000

自动播放模式下从前一张图片停止到下一张图片播放的时间间隔，单位毫秒。

$PauseOnHover

可选

1

是否自动播放模式下鼠标经过图片时停止播放。0表示不暂停，1表示在桌面设备中暂停，2表示在移动触摸设置中暂停，3表示在桌面和移动设置中都暂停，4表示在桌面设备中冻结(freeze)，8表示在移动设置中冻结，12表示在桌面和移动设置中都冻结。

$ArrowKeyNavigation

可选

1

点击箭头导航按钮时slide移动的步长。

$SlideDuration

可选

500

指定从左到右的动画的持续时间，单位毫秒。

$SlideEasing

可选

$JssorEasing$.$EaseOutQuad

指定从左到右的easing动画。

$MinDragOffsetToSlide

可选

20

触发slide的最小拖拽距离。

$SlideWidth

可选

每一个slide的宽度，单位像素。默认是'slides'容器的宽度。

$SlideHeight

可选

每一个slide的高度，单位像素。默认是'slides'容器的高度。

$SlideSpacing

可选

0

每一个slide之间的距离，单位像素。

$Cols

可选

1

在'slides'容器中显示的slide数量。如果值大于1slideshow将不可用。

$Align

可选

0

在'slides'容器中来移动位置对齐当前的slide，

$UISearchMode

可选

1

The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).

$PlayOrientation

可选

1

slide的方向。1表示水平，2表示垂直。

$DragOrientation

可选

1

拖动slide的方向。0表示不拖动，1表示水平，2表示垂直，3表示两个方向。

{$BulletNavigatorOptions}

可选

null

指定是否启用导航按钮。

{$ArrowNavigatorOptions}

可选

null

指定是否启用箭头导航按钮。

{$ThumbnailNavigatorOptions}

可选

null

指定是否启用缩略图导航。

{$SlideshowOptions}

可选

null

指定是否启用slideshow。

{$CaptionSliderOptions}

可选

null

指定是否启用动画标题。

{$BulletNavigatorOptions}的可用配置参数如下：

参数

是否必须

默认值

描述

$Class

必须

$JssorBulletNavigator$

navigator实例的class类。

$ChanceToShow

必须

2

0: Never, 1: Mouse Over, 2: Always

$ActionMode

可选

1

0: None, 1: act by click, 2: act by mouse hover, 3: both

$AutoCenter

可选

0

自动在父元素内居中。0: None, 1: Horizontal, 2: Vertical, 3: Both

$Steps

可选

1

移动到下一个slide的步长。

$Rows

可选

1

圆点导航的行数。

$SpacingX

可选

10

每一个项之间的水平距离，单位像素。

$SpacingY

可选

10

每一个项之间的垂直距离，单位像素。

$Orientation

可选

1

navigator的方向，1表示水平，2表示垂直。

$Scale

可选

true

当slider缩放时是否缩放圆点导航按钮。

{$ArrowNavigatorOptions}的可用配置参数如下：

参数

是否必须

默认值

描述

$Class

必须

$JssorArrowNavigator$

创建箭头导航实例的class类。

$ChanceToShow

必须

2

0: Never, 1: Mouse Over, 2: Always

$AutoCenter

可选

0

箭头自动在父容器中居中。0: None, 1: Horizontal, 2: Vertical, 3: Both

$Steps

可选

1

移动到下一个slide的步长。

$Scale

可选

true

当slider缩放时是否缩放箭头导航按钮。

{$ThumbnailNavigatorOptions}的可用配置参数如下：

参数

是否必须

默认值

描述

$Class

必须

$JssorThumbnailNavigator$

创建缩略图导航实例的class类。

$ChanceToShow

必须

2

0: Never, 1: Mouse Over, 2: Always

$ActionMode

可选

1

0: None, 1: act by click, 2: act by mouse hover, 3: both

$Loop

可选

1

允许旋转木马无限循环。0: stop, 1: loop, 2 rewind

$AutoCenter

可选

3

缩略图自动在父容器中居中。0: None, 1: Horizontal, 2: Vertical, 3: Both

$Cols

可选

1

显示缩略图的行数。

Rows

可选

1

显示缩略图的列数。

$SpacingX

可选

0

缩略图之间的水平间距。

$SpacingY

可选

0

缩略图之间的垂直间距。

$ParkingPosition

可选

0

The offset position to park thumbnail

$Orientation

可选

1

缩略图的布局方向，1表示水平，2表示垂直。

$Scale

可选

true

当slider缩放时是否缩放缩略图。

$NoDrag

可选

false

是否禁止拖动。

{$SlideshowOptions}的可用配置参数如下：

参数

是否必须

默认值

描述

$Class

必须

$JssorSlideshowRunner$

创建slideshow实例的class类。

$Transitions

必须

一个slideshow过渡动画的数组。

$TransitionsOrder

可选

0

slideshow过渡动画的方式。1: Sequence, 0: Random。

$ShowLink

可选

false

Whether to bring slide link on top of the slider when slideshow is running

{$SlideshowOptions}的可用配置参数如下：

参数

是否必须

默认值

描述

$Class

必须

$JssorCaptionSlider$

创建动画标题实例的class类。

$CaptionTransitions

必须

标题过渡动画的数组。

$PlayInMode

可选

1

标题进入的方式。0: None (no play), 1: Chain (goes after main slide), 3: Chain Flatten (goes after main slide and flatten all caption animations)

$PlayOutMode

可选

1

标题离开的方式。0: None (no play), 1: Chain (goes before main slide), 3: Chain Flatten (goes before main slide and flatten all caption animations)