jQuery多功能滚动预览缩略图特效插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

thumbnail-scroller是一款非常实用的jQuery多功能滚动预览缩略图特效插件。该滚动预览缩略图可以单独使用，也可以和lightbox或图片画廊等一起使用。它的效果中，所有缩略图被制作为长条，通过点击前后导航按钮或将鼠标放在长条缩略图上进行前后图片预览。它的特点有：

可以制作为水平或垂直缩略图滚动效果
可以通过鼠标移动，点击按钮或移动触摸来滚动图片
可以通过CSS来自定义外观
支持RTL方向
提供大量参数来控制图片的滚动
提供大量的方法如scroll-to，update，destroy等
可以自定义回调函数

制作方法

HTML结构

该滚动预览缩略图的基本HTML结构如下：使用一个<div>包裹一个无序列表，无序列表中放置图片缩略图。

<div id="my-thumbs-list">
  <ul>
    <li><a href="image-1-link"><img src="/path/to/image-1-file" /></a></li>
    <li><a href="image-2-link"><img src="/path/to/image-2-file" /></a></li>
    <li><a href="image-3-link"><img src="/path/to/image-3-file" /></a></li>
    <li><a href="image-4-link"><img src="/path/to/image-4-file" /></a></li>
    <!-- and so on... -->
  </ul>
</div>

CSS样式

给包裹元素设置一个宽度（水平滚动高度可设置为auto），并设置overflow: auto;。

#my-thumbs-list{
  overflow: auto;
  width: 800px;
  height: auto;
}

如果要创建垂直滚动缩略图，需要设置一个高度或max-height。

#my-thumbs-list{
  overflow: auto;
  width: 300px;
  height: 500px;
}

初始化插件

可以在页面加载完毕之后通过下面的js方法来初始化该插件。

<script>
    (function($){
        $(window).load(function(){
            $("#my-thumbs-list").mThumbnailScroller({
              axis:"x", //change to "y" for vertical scroller
            });
        });
    })(jQuery);
</script>

你也可以在HTML标签中使用 class mThumbnailScroller和HTML data属性data-mts-axis来初始化插件。

<div id="my-thumbs-list" class="mThumbnailScroller" data-mts-axis="x">
  <ul>
    <!-- your content -->
  </ul>
</div>

配置参数

滚动方向

默认的图片滚动方向是水平滚动，如果是水平滚动，你不需要设置axis参数。

$("#my-thumbs-list").mThumbnailScroller({ axis:"x" });

要创建垂直图片滚动效果，将axis设置为“y”。

$("#my-thumbs-list").mThumbnailScroller({ axis:"y" });

或在HTML标签中设置：data-mts-axis="y"。

滚动类型

你可以通过javascript来设置图片滚动的类型。

$("#my-thumbs-list").mThumbnailScroller({ type:"hover-50" });

或者在HTML标签使用data-mts-type来设置。

<div class="mThumbnailScroller" data-mts-type="hover-50">...</div>

有4种基本的滚动类型可以选择：

"hover-[number]" (例如 "hover-33", "hover-80")：
在鼠标放在图片列表上指定区域时以线性滚动模式滚动图片内容。指定区域有[number]参数决定。例如，当在一个长度为600像素的水平图片滚动列表上设置为hover-50（默认值）时，那么滚动只会在鼠标位于从左边或右边开始超过150像素的地方才被触发。当鼠标位置超过50%滚动条宽度时，滚动将停止。
hover-precise
在鼠标放在滚动列表上时以easing效果滚动图片。滚动的速度和方向由鼠标鼠标的移动和位置决定。
"click-[number]" (例如 "click-50", "click-90")
通过点击按钮来滚动图片内容。滚动图片的数量由number决定。number决定滚动区域的百分比。例如，在一个800像素的水平滚动列表中设置click-50时，每次点击左右箭头导航按钮，内容会滚动400像素。
click-thumb
每点击一次导航按钮滚动一张图片。