jQuery可预览缩略图的滑动插件

收藏

thumbnailSlider是一款滑动的缩略图插件，并且它具有丰富的Api,可自定义缩略图尺寸，滑动速度，是否支持放大效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

缩略图html结构图

<ul class="ts_container">
    <li><a href="http://www.erdangjiade.com/">Image 1</a></li>
    <li><a href="http://www.erdangjiade.com/">Image 2</a></li>
    <li><a href="http://www.erdangjiade.com/">Image 3</a></li>
    <li class="ts_thumbnails"> <!-- animate to slide frame -->
        <div class="ts_preview_wrapper">
            <ul class="ts_preview"><!-- animate left to slide to the right thumb -->
                <li><img src="images/thumbs1/1.jpg" alt="Thumb 1" /></li>
                <li><img src="images/thumbs1/2.jpg" alt="Thumb 2" /></li>
                <li><img src="images/thumbs1/3.jpg" alt="Thumb 3" /></li>
            </ul>
        </div>
        <span></span>
    </li>
</ul>

演示 1：迷你缩略图

$('#demo1').thumbnailSlider();

演示 2：有动画效果的中等缩略图

$('#demo2').thumbnailSlider({
    thumb_width: 130,
    thumb_height: 87,
    easing: 'easeOutExpo', //easeInBack
    speed: 600
});

演示 3：大缩略图

$('#demo3').thumbnailSlider({
    thumb_width: 174,
    thumb_height: 260,
    speed: 200
});

演示 4：具有放大镜功能的大缩略图

$('#demo4').thumbnailSlider({
    thumb_width: 174,
    thumb_height: 260,
    speed: 200,
    zoom: true,
    zoomspeed: 3000,
    zoomratio: 1.7
});