jquery带时间轴的图片轮播

收藏

今天给大家介绍一款图片轮播插件，配上时间轴的效果，那就酷毙了。

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

查看演示

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

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

HTML

首先我们放置轮播图片，和点击的标题：

<div id="scroll_area" class="imgfocus"> 
   <div id="bigimg_area" class="imgbox"> 
    <div class="bigimg"> 
     <a href="http://www.erdangjiade.com"> <img src="images/1.jpg" /> </a> 
    </div> 
    <div class="bigimg"> 
     <a href="http://www.erdangjiade.com"> <img src="images/2.jpg" /> </a> 
    </div> 
    <div class="bigimg"> 
     <a href="http://www.erdangjiade.com"> <img src="images/3.jpg" /> </a> 
    </div> 
    <div class="bigimg"> 
     <a href="http://www.erdangjiade.com"> <img src="images/4.jpg" /> </a> 
    </div> 
   </div> 
   <ul id="tabs" 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>

jQuery

koala插件调用：

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