缩略图html结构图

<ul class="ts_container">
    <li><a href="https://jy.tp.yuanmeng.life/">Image 1</a></li>
    <li><a href="https://jy.tp.yuanmeng.life/">Image 2</a></li>
    <li><a href="https://jy.tp.yuanmeng.life/">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
});