jQuery图片滚动时间轴演示特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

6 22 8



特效描述:图片滚动 时间轴演示。jQuery实用的水平图片滚动,带时间轴显示代码。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/timeline.css"/>

2. 引入JS

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

3. HTML代码

<!--html-->
<div id="timeLine">
    <ul id="yearList">
        <li class="year-active">1995<i class="year-dot"></i></li>
        <li>1996<i class="year-dot"></i></li>
        <li>1997<i class="year-dot"></i></li>
        <li>1998<i class="year-dot"></i></li>
        <li>1999<i class="year-dot"></i></li>
        <li>2000<i class="year-dot"></i></li>
        <li>2001<i class="year-dot"></i></li>
        <li>2002<i class="year-dot"></i></li>
        <li>2003<i class="year-dot"></i></li>
        <li>2004<i class="year-dot"></i></li>
        <li>2005<i class="year-dot"></i></li>
    </ul>
    <div class="dotted-line"></div>
    <div id="cList">
        <a href="#" id="btnLeft">&lt;</a>
        <div style="width: 850px;margin: 0 auto; overflow: hidden">
            <ul id="cUl">
                <li>
                    <span class="li-tit">1</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a1.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">2</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a2.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">3</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a3.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">4</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a4.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">5</span>
                    <div class="container-li">
                        <div class="c-li-left">
                           <img src="images/a1.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">6</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a2.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">7</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a3.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">8</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a4.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">9</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a1.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">10</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a2.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="li-tit">11</span>
                    <div class="container-li">
                        <div class="c-li-left">
                            <img src="images/a3.png" alt=""/>
                        </div>
                        <div class="c-li-right">
                            <p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
                            <p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <a href="#" id="btnRight">&gt;</a>
    </div>
</div>
<!--js-->
<script type="text/javascript">
    $(function(){
        $("#timeLine").timeLine({
            w:850  //每一个li的宽度
//            btnPrev:"#btnLeft",      //上一个按钮
//            btnNext: "#btnRight",  //下一个按钮
//            dateBox:"#yearList", //日期的ul盒子
//            dateArr: "#yearList li", //保存每一个日期的数组
//            conBox:"#cUl",  //保存切换内容的ul盒子
//            conArr:"#cUl li" //保存每一个内容的数
        });
    });
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到