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

<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的可用配置参数如下：

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

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

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

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

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

关于Jssor slider幻灯片更详细的介绍请参考：http://www.jssor.com/development/index.html