jQuery可预览缩略图的滑动插件_图片代码_图片滑动_滑动_缩略图

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

淘建站为您提供更多_图片代码_图片滑动_滑动_缩略图，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 451 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：图片代码 > 图片滑动难易程度：中级

缩略图html结构图

<ul class="ts_container">
    <li><a href="http://www.sucaiq.com/">Image 1</a></li>
    <li><a href="http://www.sucaiq.com/">Image 2</a></li>
    <li><a href="http://www.sucaiq.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
});