支援30+種型別幻燈片 | 輪播圖 | 旋轉木馬的強大jQuery外掛

listjjjclove發表於2024-12-02

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;">
    <!-- Slides Container -->
    <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;">
    <!-- Slides Container -->
    <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>
    <!-- Trigger -->
    <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