jQuery多功能图片滑块插件thumb scroller.js

使用方法：

引入核心css样式文件

<link rel="stylesheet" href="jquery.mThumbnailScroller.css">

引入jQuery库文件，插件JS文件

<!-- Google CDN jQuery with fallback to local -->
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<!-- plugin script -->
<script src="jquery.mThumbnailScroller.js"></script>

插件初始化、参数配置

(function($){
    $(window).load(function(){
        
        $("#content-1").mThumbnailScroller({
            axis:"y",
            type:"hover-precise"
        });
        
    });
})(jQuery);

HTML结构

<div id="content-1" class="content">
    <ul>
        <li><a href="#"><img src="examples/thumbnails/img3.jpg" /></a></li>
        <li><a href="#"><img src="examples/thumbnails/img7.jpg" /></a></li>
        <li><a href="#"><img src="examples/thumbnails/img11.jpg" /></a></li>
        <li><a href="#"><img src="examples/thumbnails/img15.jpg" /></a></li>
        <li><a href="#"><img src="examples/thumbnails/img20.jpg" /></a></li>
        <li><a href="#"><img src="examples/thumbnails/img3.jpg" /></a></li>
        <li><a href="#"><img src="examples/thumbnails/img7.jpg" /></a></li>
        <li><a href="#"><img src="examples/thumbnails/img11.jpg" /></a></li>
        <li><a href="#"><img src="examples/thumbnails/img15.jpg" /></a></li>
        <li><a href="#"><img src="examples/thumbnails/img20.jpg" /></a></li>
    </ul>
</div>

友情提示：

1、如果你在IE7，或IE8中沒用的话，估计就是下面这段代码的原因（要加上）；

如果地址失效的话，要下载到本地，再引入到页面

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2、在页面中，下面代码 "click-25" 后面多了一个, 要删掉否则IE7会报错！

$("#content-6").mThumbnailScroller({
   type:"click-25",
});