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



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

31 123 42



特效描述:分类导航菜单 图片轮播滚动。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>



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


热门标签: 滚动导航菜单 导航切换 图片头像上传 滚动切换 文件上传 图片滚动 图片切换 文本框 文字滚动 文字切换 下拉框 背景切换 复选 图片文字滚动 手风琴 单选 全屏滚动 选项卡自动切换 登录框 页面滚动 视频切换 注册框 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动流动 滚动切换 滑动选项卡切换 自动滚动图片轮播 选项卡切换 滑动手风琴 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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