幻灯片插件-jquery.sliderPro.min.js 第二波

杨飞飙

2023-12-01

根据github上的官方说明翻译

模块是可选的代码块扩展插件的核心，加入了更多的功能。这种模块化的架构使得代码更有条理，也可以让你只包括将要使用的功能，从而优化文件大小和性能。

1.淡出

该模块用淡入淡出过渡效果替换默认的 slide/swipe效果。
可定制的属于：fade, fadeOutPreviousSlide 和 fadeDuration.

2.标题

允许你为幻灯片添加标题，标题会在幻灯片下面显示，一次只能显示一个标题。标题必须包含在.sp-caption类里面。

可定制的属于：fadeCaption 和captionFadeDuration.

3.全屏

允许你在支持html5全屏api的浏览器中全屏查看幻灯片。如果你的浏览器支持将会在幻灯片的右上角显示一个按钮。

可设置的属性：fullScreen 和 fadeFullScreen.

4.延迟加载

只有当当前幻灯片图片或者缩略图可见时该图片才会加载该图片，从而节省带宽，同时也使最开始的网页加载快很多

<div class="slider-pro">
    <div class="sp-slides">
        <div class="sp-slide">
            <img class="sp-image" src="path/to/blank.gif" data-src="path/to/image1.jpg"/>
        </div>

        <div class="sp-slide">
            <a href="http://bqworks.com">
                <img class="sp-image" src="path/to/blank.gif" data-src="path/to/image2.jpg"/>
            </a>
        </div>

        <div class="sp-slide">
            <img class="sp-image" src="path/to/blank.gif" data-src="path/to/image3.jpg"/>
        </div>
    </div>

    <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail1.jpg"/>
        <img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail2.jpg"/>
    </div>
</div>

图像的src属性指向一个占位符，真正的图片的src属性将由data-src属性指定。当图片变得可见时，占位符图像将被实际的图像代替。你可以使用自带的滑块占位符图像，也可以创建自己的图像占位符。捆绑占位符图像位于dist/css/images/blank.gif，它是1*1的空白图像。

5.Retina

允许在高PPI屏幕中指定替代图片。注意：该模块不仅仅在retina屏幕起作用，还在高PPI屏幕中起作用。

高分辨率图片需要再data-retina属性中指定。

<div class="slider-pro">
    <div class="sp-slides">
        <div class="sp-slide">
            <img class="sp-image" src="path/to/blank.gif" data-src="path/to/image1.jpg" data-src="path/to/image1@2x.jpg"/>
        </div>

        <div class="sp-slide">
            <a href="http://bqworks.com">
                <img class="sp-image" src="path/to/blank.gif" data-src="path/to/image2.jpg" data-retina="path/to/image2@2x.jpg"/>
            </a>
        </div>

        <div class="sp-slide">
            <img class="sp-image" src="path/to/blank.gif" data-src="path/to/image3.jpg" data-retina="path/to/image3@2x.jpg"/>
        </div>
    </div>

    <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail1.jpg" data-retina="path/to/thumbnail1@2x.jpg"/>
        <img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail2.jpg" data-retina="path/to/thumbnail2@2x.jpg"/>
    </div>
</div>

6.附带条件的图片

该模块可以针对不同的屏幕大小设置不同的图片

<div class="sp-slide">
    <img class="sp-image" src="path/to/blank.gif" 
        data-src="path/to/image_default.jpg"
        data-small="path/to/image_small.jpg"
        data-medium="path/to/image_medium.jpg"
        data-large="path/to/image_large.jpg"/>
</div>

data-small, data-medium 和 data-large三个属性的大小结点是由smallSize, mediumSize 和 largeSize三个函数属性确定的。默认的设置是480px，768px，1024px。

幻灯片大小	加载的图片
小于largeSize	data-large
小于mediumSize	data-medium
小于smallSize	data-small
大于largeSize	默认图片data-src

单独为Retina屏幕设置

<div class="sp-slide">
    <img class="sp-image" src="path/to/blank.gif" 
        data-src="path/to/image_default.jpg"
        data-small="path/to/image_small.jpg"
        data-medium="path/to/image_medium.jpg"
        data-large="path/to/image_large.jpg"
        data-retinasmall="path/to/image_retina_small.jpg"
        data-retinamedium="path/to/image_retina_medium.jpg"
        data-retinalarge="path/to/image_retina_large.jpg"/>
</div>

可设置的属于：smallSize, mediumSize 和 largeSize.

7.层

添加可以被定为、设置大小、添加动画的元素（文本或者HTML内容）

<div class="sp-slide">
    <img class="sp-image" src="path/to/image.jpg"/>

    <h3 class="sp-layer">
        Lorem ipsum dolor sit amet
    </h3>

    <p class="sp-layer">
        consectetur adipisicing elit
    </p>
</div>

如上所见，层需要添加sp-layer类，但是可以是任何HTML元素。

下面是一个添加样式和动画效果的例子。

<div class="sp-slide">
    <img class="sp-image" src="path/to/image.jpg"/>

    <h3 class="sp-layer sp-black"
        data-position="bottomLeft" data-horizontal="10%"
        data-show-transition="left" data-show-delay="300" data-hide-transition="right">
        Lorem ipsum dolor sit amet
    </h3>

    <p class="sp-layer sp-white sp-padding"
        data-width="200" data-horizontal="center" data-vertical="40%"
        data-show-transition="down" data-hide-transition="up">
        consectetur adipisicing elit
    </p>

    <div class="sp-layer sp-static">Static content</div>
</div>

这里有几个预定义class样式定义层的样式。

层的位置、尺寸和东湖懂事通过data属性设置的。

预定义类：

sp-static
设置图层所有时间可见

sp-black
设置黑色透明背景，字体为白色

sp-white
白色透明背景，字体为黑色

sp-padding
增加了10px的padding值

sp-rounded
设置了radius，使得边角圆润

Data属性：

data-width
设置层的宽度，如果没有设置，层适应内部内容的宽度

data-height
设置层的高度，如果没有设置，层适应内部内容的高度

data-depth
设置深度，相当于z-index

data-position
设置位置，默认'topLeft'

'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight', 'centerLeft', 'centerRight' and 'centerCenter'.

data-horizontal
水平位置。以data-position为基准点

data-vertical
垂直位置。以data-position为基准点

data-show-transition

设置幻灯片的过渡出现时移动的方向。可以设置'left', 'right', 'up' or 'down'

data-show-offset
设置了layer出现时候朝最终位置做动画时候的一个位置偏移，必须是一个固定的值

data-show-duration
设置过渡动画持续时间

data-show-delay
设置展示过渡延迟，延迟时间开始到新幻灯片开始的时间

data-hide-transition
设置消失的过渡方位，可以设置为 'left', 'right', 'up' or 'down'

data-hide-offset
设置消失时候从动画位置到最开始位置的一个数据偏移，需要设置固定值

data-hide-duration
隐藏的持续时间

data-hide-delay
隐藏的延迟时间

data-stay-duration
设置图层可见的持续时间

layers在大多数浏览器中使用CSS3过渡动画。在IE9和IE8（其中CSS3过渡不支持），各层将只淡入/淡出，而在IE7及以上层会出现没有任何动画。

可设置的函数属性：waitForLayers, autoScaleLayers and autoScaleReference.

8.深层链接

<div id="my-slider" class="slider-pro">
    <div class="sp-slides">
        <div class="sp-slide">
            <img class="sp-image" src="path/to/image1.jpg"/>
        </div>

        <div id="my-slide" class="sp-slide">
            <img class="sp-image" src="path/to/image2.jpg"/>
        </div>

        <div class="sp-slide">
            <img class="sp-image" src="path/to/image3.jpg"/>
        </div>
    </div>
</div>

为了打开第二张幻灯片，您可以使用http://domain.com/page#my-slider/1或http://domain.com/page#my-slider/my-slide。

可设置的函数属性：updateHash.

9.自动播放

自动播放功能

可设置的属性：autoplay, autoplayDelay, autoplayDirection 和 autoplayOnHover.

10.触摸滑动

可设置的属性：touchSwipe and touchSwipeThreshold.

11.按钮

导航按钮

12.箭头导航

13.键盘箭头导航

相关属性： keyboard and keyboardOnlyOnFocus.

14.缩略图

增加了缩略图功能，缩略图可以包含所有的HTML内容。

两种添加缩略图的方法：

1、在sp-thumbnails里面添加

<div class="slider-pro">
    <div class="sp-slides">
        ...
    </div>

    <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="path/to/thumbnail.jpg"/>

        <p class="sp-thumbnail">Thumbnail 2</p>

        <div class="sp-thumbnail">
            <img class="sp-thumbnail-image" src="path/to/thumbnail.jpg"/>
            <p class="sp-thumbnail-text">Tempor incididunt ut labore et dolore magna</p>
        </div>
    </div>
</div>

2、在对应的sp-slide里面添加

<div class="slider-pro">
    <div class="sp-slides">
        <div class="sp-slide">
            <img class="sp-image" src="path/to/image1.jpg"/>

            <img class="sp-thumbnail" src="path/to/thumbnail.jpg"/>
        </div>

        <div id="my-slide" class="sp-slide">
            <img class="sp-image" src="path/to/image2.jpg"/>

            <p class="sp-thumbnail">Thumbnail 2</p>
        </div>

        <div class="sp-slide">
            <img class="sp-image" src="path/to/image3.jpg"/>

            <div class="sp-thumbnail">
                <img class="sp-thumbnail-image" src="path/to/thumbnail.jpg"/>
                <p class="sp-thumbnail-text">Tempor incididunt ut labore et dolore magna</p>
            </div>
        </div>
    </div>
</div>

可定制的属性：thumbnailWidth, thumbnailHeight, thumbnailsPosition and thumbnailPointer.

15.缩略图触摸卡

设置的属于：thumbnailTouchSwipe.

16.缩略图箭头

设置的属于：thumbnailArrows and fadeThumbnailArrows.

17.视频

YouTube

<a class="sp-video" href="//www.youtube.com/watch?v=oaDkph9yQBs">
    <img src="path/to/poster.jpg" width="500" height="300"/>
</a>

<iframe class="sp-video" src="http://www.youtube.com/embed/msIjWthwWwI?enablejsapi=1&wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>

设置的属于：reachVideoAction, leaveVideoAction, playVideoAction, pauseVideoAction and endVideoAction.