jquery分类导航菜单图片轮播滚动特效代码下载



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

70 277 93



特效描述:分类导航菜单 图片轮播滚动。jquery分类导航菜单图片轮播滚动特效代码下载

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2. 引入JS

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

3. HTML代码

        <div style="height:100px;"></div>
        <div class="city-nav-header">
            <div class="city-nav-list">
                <a href="#">
                    <img src="images/icon-001.png" alt="">课程中心
                </a>
                <div class="city-nav-left">
                    <dl>
                        <dd>
                            <a href="#" class="arrow">
                                <img src="images/icon-002.png" alt="">软件水平考试
                            </a>
                            <ul class="city-nav-casket">
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">高 级:</a>
                                </li>
                                <li>
                                    <a href="#">系统分析师</a>
                                </li>
                                <li>
                                    <a href="#">信息系统项目管理师</a>
                                </li>
                                <li>
                                    <a href="#">网络规划设计师</a>
                                </li>
                                <li>
                                    <a href="#">系统架构设计师</a>
                                </li>
                                <li style="padding-left:72px;">
                                    <a href="#">系统规划与管理师</a>
                                </li>
                                <div class="clearfix"></div>
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">中 级:</a>
                                </li>
                                <li>
                                    <a href="#">系统集成项目管理工程师 </a>
                                </li>
                                <li>
                                    <a href="#">软件设计师网络工程师</a>
                                </li>
                                <li>
                                    <a href="#">信息系统监理师</a>
                                </li>
                                <li style="padding-left:72px;">
                                    <a href="#">信息系统管理工程师</a>
                                </li>
                                <li>
                                    <a href="#">电子商务设计师</a>
                                </li>
                                <li>
                                    <a href="#">软件评测师</a>
                                </li>
                                <li>
                                    <a href="#">信息安全工程师</a>
                                </li>
                                <li style="padding-left:72px;">
                                    <a href="#">数据库系统工程师</a>
                                </li>
                                <li>
                                    <a href="#">嵌入式系统设计师</a>
                                </li>
                                <div class="clearfix"></div>
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">初 级:</a>
                                </li>
                                <li>
                                    <a href="#">程序员</a>
                                </li>
                                <li>
                                    <a href="#">网络管理员</a>
                                </li>
                                <li>
                                    <a href="#">信息处理技术员</a>
                                </li>
                                <li>
                                    <a href="#">信息系统运行管理员</a>
                                </li>
                                <div class="clearfix"></div>
                            </ul>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="images/icon-003.png" alt="">二级建造师
                            </a>
                            <ul class="city-nav-casket">
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">公 共:</a>
                                </li>
                                <li>
                                    <a href="#">工程法规</a>
                                </li>
                                <li>
                                    <a href="#">施工管理</a>
                                </li>
                                <div class="clearfix"></div>
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">实 务:</a>
                                </li>
                                <li>
                                    <a href="#">建筑工程 </a>
                                </li>
                                <li>
                                    <a href="#">市政工程</a>
                                </li>
                                <li>
                                    <a href="#">机电工程</a>
                                </li>
                                <li>
                                    <a href="#">公路工程</a>
                                </li>
                                <li>
                                    <a href="#">水利水电工程</a>
                                </li>
                                <li style="padding-left:72px;">
                                    <a href="#">矿业工程</a>
                                </li>
                                <div class="clearfix"></div>
                            </ul>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="images/icon-004.png" alt="">一级建造师
                            </a>
                            <ul class="city-nav-casket">
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">公 共:</a>
                                </li>
                                <li>
                                    <a href="#">工程法规</a>
                                </li>
                                <li>
                                    <a href="#">施工管理</a>
                                </li>
                                <div class="clearfix"></div>
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">实 务:</a>
                                </li>
                                <li>
                                    <a href="#">建筑工程 </a>
                                </li>
                                <li>
                                    <a href="#">市政工程</a>
                                </li>
                                <li>
                                    <a href="#">机电工程</a>
                                </li>
                                <li>
                                    <a href="#">公路工程</a>
                                </li>
                                <li>
                                    <a href="#">水利水电工程</a>
                                </li>
                                <li style="padding-left:72px;">
                                    <a href="#">矿业工程</a>
                                </li>
                                <div class="clearfix"></div>
                            </ul>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="images/icon-005.png" alt="">通信水平考试
                            </a>
                            <ul class="city-nav-casket">
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">公 共:</a>
                                </li>
                                <li>
                                    <a href="#">工程法规</a>
                                </li>
                                <li>
                                    <a href="#">施工管理</a>
                                </li>
                                <div class="clearfix"></div>
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">实 务:</a>
                                </li>
                                <li>
                                    <a href="#">建筑工程 </a>
                                </li>
                                <li>
                                    <a href="#">市政工程</a>
                                </li>
                                <li>
                                    <a href="#">机电工程</a>
                                </li>
                                <li>
                                    <a href="#">公路工程</a>
                                </li>
                                <li>
                                    <a href="#">水利水电工程</a>
                                </li>
                                <li style="padding-left:72px;">
                                    <a href="#">矿业工程</a>
                                </li>
                                <div class="clearfix"></div>
                            </ul>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="images/icon-006.png" alt="">资格考试/考研
                            </a>
                            <ul class="city-nav-casket">
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">公 共:</a>
                                </li>
                                <li>
                                    <a href="#">工程法规</a>
                                </li>
                                <li>
                                    <a href="#">施工管理</a>
                                </li>
                                <div class="clearfix"></div>
                                <li style="border-right: none;padding-right: 0;">
                                    <a href="#" style="color:#666">实 务:</a>
                                </li>
                                <li>
                                    <a href="#">建筑工程 </a>
                                </li>
                                <li>
                                    <a href="#">市政工程</a>
                                </li>
                                <li>
                                    <a href="#">机电工程</a>
                                </li>
                                <li>
                                    <a href="#">公路工程</a>
                                </li>
                                <li>
                                    <a href="#">水利水电工程</a>
                                </li>
                                <li style="padding-left:72px;">
                                    <a href="#">矿业工程</a>
                                </li>
                                <div class="clearfix"></div>
                            </ul>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="images/icon-007.png" alt="">PMP/ACP/NPDP
                            </a>
                            <ul class="city-nav-casket" style="width:240px;">
                                <li style="height: 32px; line-height: 32px;border-right: medium none;">
                                    <a href="#">PMP考试</a>
                                </li>
                                <li style="height: 32px; line-height: 32px;border-right: medium none;">
                                    <a href="#">ACP考试</a>
                                </li>
                                <li style="height: 32px; line-height: 32px;border-right: medium none;">
                                    <a href="#">NPDP考试</a>
                                </li>
                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="city-nav-item">
                <a href="#">
                    <i></i>
                    免费公开课
                </a>
                <a href="#">学习包</a>
                <a href="#" style="color:#08acee">直播课堂</a>
                <a href="#">视频中心</a>
                <a href="#">云阅读</a>
                <a href="#">题库</a>
            </div>
        </div>
        <div class="city-slide">
            <div class="hd city-slide-header">
                <a class="prev" href="javascript:void(0)"></a>
                <a class="next" href="javascript:void(0)"></a>
            </div>
            <div class="bd city-slide-body">
                <ul>
                    <li style="background:#bf271d">
                        <a href="#">
                            <img src="images/banner1.jpg" alt="">
                        </a>
                    </li>
                    <li style="background:#0f2049">
                        <a href="#">
                            <img src="images/banner2.jpg" alt="">
                        </a>
                    </li>
                    <li style="background:#d3ebfb">
                        <a href="#">
                            <img src="images/banner3.jpg" alt="">
                        </a>
                    </li>
                    <li style="background:#7094fc">
                        <a href="#">
                            <img src="images/banner4.png" alt="">
                        </a>
                    </li>
                    <li style="background:#44affc">
                        <a href="#">
                            <img src="images/banner5.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            jQuery(".city-nav-list").slide({
                type: "menu",
                titCell: "dd",
                targetCell: "ul",
                delayTime: 0,
                defaultPlay: false,
                returnDefault: true
            });
            jQuery(".city-slide").slide({
                mainCell: ".bd ul",
                effect: "fold",
                autoPlay: true,
                delayTime: 800
            });
        </script>



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



×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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