强大幻灯片轮播图旋转木马jQuery插件

PetitQ 幻灯片/轮播 2018-11-06 1.56K 0 1

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 文件）。

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jssor.slider.mini.js"></script>

HTML 结构:

jQuery 版本的幻灯片结构：

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">

```
    
```

    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">

        <div><img u="image" src="image1.jpg" /></div>

        <div><img u="image" src="image2.jpg" /></div>

```
    </div>
```
```
</div>
```

纯 JavaScript 版本的幻灯片结构：

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">

```
    
```

    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">

        <div><img u="image" src="image1.jpg" /></div>

        <div><img u="image" src="image2.jpg" /></div>

```
    </div>
```
```
    
```

    <script>jssor_slider1_starter('slider1_container');</script>

```
</div>
```

初始化插件:

在页面 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)