横向缩略图切换

• 
• 
• 
• 
• 
• 
• 
• 

引入外部css:

<link rel="stylesheet" type="text/css" href="https://download.shengli.com/ui/control/thumbnails/css/horizontal_thumbnails.css">

引入外部js:

<script type="text/javascript" src="https://download.shengli.com/ui/js/jquery.min.js"></script>
<script type="text/javascript" src="https://download.shengli.com/ui/control/thumbnails/js/horizontal_thumbnails.js"></script>

html代码：

<div class="horizontal-box">
<div class="big-pic">
    <img src="https://download.shengli.com/ui/control/thumbnails/images/1.jpg" class="start">
</div>
<div class="small-pic">
    <div class="prev"></div>
    <div class="small-box">
        <ul class="small-list">
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/1.jpg" class="on">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/1.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/2.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/2.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/3.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/3.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/4.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/4.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/5.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/5.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/6.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/6.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/7.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/7.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/8.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/8.jpg" class="start">
            </li>
        </ul>
    </div>
    <div class="next"></div>
</div>
</div>

js配置：

$('.horizontal-box').horizontal_thumbnails({

      loop:false,//不支持回滚

      current:function(obj){

            //动画执行到当前幻灯片执行函数

            console.log('current:');

            console.log(obj.index());

      },

      animateEnd:function(obj){

            //当前幻灯片动画结束时执行函数

            console.log('animateEnd:');

            console.log(obj.index());

    }

});

竖向缩略图切换

• 
• 
• 
• 
• 
• 
• 
• 

引入外部css:

<link rel="stylesheet" type="text/css" href="https://download.shengli.com/ui/control/thumbnails/css/vertical_thumbnails.css">

引入外部js:

<script type="text/javascript" src="js/jquery.min.js"></script>

 
<script type="text/javascript" src="https://download.shengli.com/ui/control/thumbnails/js/vertical_thumbnails.js"></script>

html代码：

<div class="vertical-box">
<div class="big-pic fl">
    <img src="https://download.shengli.com/ui/control/thumbnails/images/1.jpg" class="start">
</div>
<div class="small-pic fl">
    <div class="top"></div>
    <div class="small-box">
        <ul class="small-list">
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/1.jpg" class="on">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/1.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/2.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/2.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/3.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/3.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/4.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/4.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/5.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/5.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/6.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/6.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/7.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/7.jpg" class="start">
            </li>
            <li data-big="https://download.shengli.com/ui/control/thumbnails/images/8.jpg">
                <img src="https://download.shengli.com/ui/control/thumbnails/images/8.jpg" class="start">
            </li>
        </ul>
    </div>
    <div class="bottom"></div>
</div>
</div>

js配置：

$('.vertical-box').vertical_thumbnails({

      loop:false,//不支持回滚

      current:function(obj){

            //动画执行到当前幻灯片执行函数

            console.log('current:');

            console.log(obj.index());

      },

      animateEnd:function(obj){

            //当前幻灯片动画结束时执行函数

            console.log('animateEnd:');

            console.log(obj.index());

    }

});