最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jquery带时间轴的图片轮播

来源:http://www.erdangjiade.com/ 沐浴春风 2015-04-25 11:53浏览(1572)

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

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

jquery带时间轴的图片轮播
分类:图片代码 > 图片轮播 难易:初级
查看演示

加我微信,拉你进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 // 停顿时间  
    })
})
标签: 轮播时间轴
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/75.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2