基于koala带时间轴的焦点图插件

        基于koala带时间轴的焦点图插件(koala.min.1.5.js),焦点图可以自动切换，在焦点图片的右侧有图片节点时间轴，鼠标移动到上面的节点来切换，切换到的当前图片后，时间轴上的文字会放大显示，每个节点的文字，对应图片的标题。可以设定是否自动播放，设置效果，是否显示切换按钮以及停顿时间。主要是通过两个JS文件来驱动：koala.min.1.5.js和terminator2.2.min.js，所以两个文件的相对文字不能出现问题。
1、将style.css、koala.min.1.5.js、terminator2.2.min.js三个文件放入您的项目中，koala.min.1.5.js、terminator2.2.min.js最好放在同一目录，不然会导致引入出错。

2、引入相关文件：

<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/koala.min.1.5.js"></script>

3、构筑html结构：

<div id="decoroll2" class="imgfocus">
    <div id="decoimg_a2" class="imgbox">
        <div class="decoimg_b2"><a href="http://www.5imoban.net/"><img src="img/1.jpg"></a></div>
        <div class="decoimg_b2"><a href="http://www.5imoban.net/"><img src="img/2.jpg"></a></div>
        <div class="decoimg_b2"><a href="http://www.5imoban.net/"><img src="img/3.jpg"></a></div>
        <div class="decoimg_b2"><a href="http://www.5imoban.net/"><img src="img/4.jpg"></a></div>
    </div>
    <ul id="deconum2" class="num_a2">
        <li><a href="javascript:void(0)" hidefocus="true" target="_self">杨幂</a></li>
        <li><a href="javascript:void(0)" hidefocus="true" target="_self">范冰冰</a></li>
        <li><a href="javascript:void(0)" hidefocus="true" target="_self">高圆圆</a></li>
        <li><a href="javascript:void(0)" hidefocus="true" target="_self">刘诗诗</a></li>
    </ul>
</div>

4、调用js：

Qfast.add('widgets', { path: "js/terminator2.2.min.js", type: "js", requires: ['fx'] });  
Qfast(false, 'widgets', function () {
    K.tabs({
        id: 'decoroll2',//焦点图包裹id  
        conId: "decoimg_a2",//大图域包裹id  
        tabId:"deconum2",//小圆点数字提示id
        tabTn:"a",
        conCn: '.decoimg_b2',//大图域配置class       
        auto: 1,//自动播放 1或0
        effect: 'fade',//效果配置
        eType: 'mouseover',// 鼠标事件
        pageBt:true,//是否有按钮切换页码
        bns: ['.prev', '.next'],//前后按钮配置class                          
        interval: 3000// 停顿时间  
    })
}) 

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！