特效描述:分类导航 图片轮播。jQuery计算机网站分类导航图片轮播特效代码下载
代码结构
1. 引入CSS
<link rel="stylesheet" href="statics/css/style.css" />
2. 引入JS
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script src="statics/js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
3. HTML代码
<div id="wrapper"> <div id="pager"> <div class="cf" style="position: relative;"> <!--轮播图开始--> <div class="top-banner"> <div id="slideBox" class="slideBox banner-container"> <div class="hd banner-pagination"> <ul> <li class="swiper-pagination-switch"></li> <li class="swiper-pagination-switch"></li> <li class="swiper-pagination-switch"></li> </ul> </div> <div class="bd"> <ul> <li><a href="javascript:;" target="_blank"><img src="statics/images/banner1.jpg" /></a></li> <li><a href="javascript:;" target="_blank"><img src="statics/images/banner2.jpg" /></a></li> <li><a href="javascript:;" target="_blank"><img src="statics/images/banner3.jpg" /></a></li> </ul> </div> <!-- 下面是前/后按钮代码,如果不需要删除即可 --> <a id="banner-arrow-left" class="banner-arrow-left prev" href="javascript:void(0)"></a> <a id="banner-arrow-right" class="banner-arrow-right next" href="javascript:void(0)"></a> </div> </div> <!--轮播图结束--> <!--侧边分类开始--> <div class="aside-allCategory"> <div class="bd"> <ul class="aside-cList"> <li> <div> <a href="javascript:;">前端开发</a> <div class="list-show"> <div class="knowledge-system"> <p class="list-title knowledge-title"><span>知识体系</span></p> <div> <dl> <dt><a href="javascript:;" >前端基础</a></dt> <dd class="cf"> <a href="javascript:;">HTML</a> <a href="javascript:;">CSS</a> <a href="javascript:;">JavaScript</a> <a href="javascript:;">HTML5</a> <a href="javascript:;">CSS3</a> <a href="javascript:;">技术前瞻</a> </dd> </dl> <dl> <dt><a href="javascript:;" >前端进阶</a></dt> <dd class="cf"> <a href="javascript:;">Typescript</a> <a href="javascript:;">前端安全</a> <a href="javascript:;">项目实战</a> </dd> </dl> <dl> <dt><a href="javascript:;" >前端框架</a></dt> <dd class="cf"> <a href="javascript:;">jQuery</a> <a href="javascript:;">jQuery UI</a> <a href="javascript:;">jQuery Mobile</a> <a href="javascript:;">Ext JS</a> <a href="javascript:;">AngularJS</a> <a href="javascript:;">ReactJS</a> <a href="javascript:;">Bootstrap</a> <a href="javascript:;">React Native</a> <a href="javascript:;">Backbone</a> <a href="javascript:;">Three.js</a> <a href="javascript:;">MooTools</a> <a href="javascript:;">Compass</a> </dd> </dl> <dl> <dt><a href="javascript:;" >HTML5游戏</a></dt> <dd class="cf"> <a href="javascript:;">Canvas</a> <a href="javascript:;">SVG</a> <a href="javascript:;">WebGL</a> <a href="javascript:;">Cocos2d-js</a> <a href="javascript:;">CreateJS</a> <a href="javascript:;">Flash</a> <a href="javascript:;">Unreal</a> <a href="javascript:;">Egret</a> <a href="javascript:;">Phaser</a> </dd> </dl> </div> </div> <div class="recommend-study"> <p class="list-title recommend-title"><span>推荐学习</span></p> <ul class="recommend"> </ul> </div> </div> </div> </li> <li> <div> <a href="javascript:;">移动开发</a> <div class="list-show"> <div class="knowledge-system"> <p class="list-title knowledge-title"><span>知识体系</span></p> <div> <dl> <dt><a href="javascript:;" >应用开发</a></dt> <dd class="cf"> <a href="javascript:;">Android</a> <a href="javascript:;">iOS</a> </dd> </dl> <dl> <dt><a href="javascript:;" >游戏开发</a></dt> <dd class="cf"> <a href="javascript:;">Cocos</a> <a href="javascript:;">Unity3D</a> <a href="javascript:;">SpriteKit 2D</a> <a href="javascript:;">Unreal</a> </dd> </dl> <dl> <dt><a href="javascript:;" >常用框架</a></dt> <dd class="cf"> <a href="javascript:;">Cordova</a> <a href="javascript:;">React Native</a> </dd> </dl> </div> </div> <div class="recommend-study"> <p class="list-title recommend-title"><span>推荐学习</span></p> <ul class="recommend"> </ul> </div> </div> </div> </li> <li> <div> <a href="javascript:;">后端开发</a> <div class="list-show"> <div class="knowledge-system"> <p class="list-title knowledge-title"><span>知识体系</span></p> <div> <dl> <dt><a href="javascript:;" >Python</a></dt> <dd class="cf"> <a href="javascript:;">Python 基础</a> <a href="javascript:;">web2py</a> <a href="javascript:;">Django</a> <a href="javascript:;">Flask</a> <a href="javascript:;">GUI</a> <a href="javascript:;">数据挖掘与分析</a> </dd> </dl> <dl> <dt><a href="javascript:;" >PHP</a></dt> <dd class="cf"> <a href="javascript:;">PHP 基础</a> <a href="javascript:;">YII</a> <a href="javascript:;">ThinkPHP</a> <a href="javascript:;">Laravel</a> <a href="javascript:;">WordPress</a> <a href="javascript:;">Phalcon</a> <a href="javascript:;">Apache</a> <a href="javascript:;">Facebook Hack</a> </dd> </dl> <dl> <dt><a href="javascript:;" >Node.js</a></dt> <dd class="cf"> <a href="javascript:;">Node.js 基础</a> <a href="javascript:;">express</a> <a href="javascript:;">Meteor</a> <a href="javascript:;">Hexo</a> </dd> </dl> <dl> <dt><a href="javascript:;" >ASP.NET</a></dt> <dd class="cf"> <a href="javascript:;">C#</a> <a href="javascript:;">ASP.NET MVC</a> <a href="javascript:;">Entity Framework</a> <a href="javascript:;">WPF</a> </dd> </dl> <dl> <dt><a href="javascript:;" >J2EE</a></dt> <dd class="cf"> <a href="javascript:;">JSP</a> <a href="javascript:;">Maven</a> <a href="javascript:;">Spring</a> <a href="javascript:;">SpringMVC</a> <a href="javascript:;">Struts2</a> <a href="javascript:;">MyBatis</a> <a href="javascript:;">Hibernate</a> <a href="javascript:;">Lucene</a> <a href="javascript:;">常用框架</a> <a href="javascript:;">项目实战</a> </dd> </dl> <dl> <dt><a href="javascript:;" >Ruby</a></dt> <dd class="cf"> <a href="javascript:;">Ruby 基础</a> <a href="javascript:;">Ruby on Rails</a> <a href="javascript:;">Grape</a> <a href="javascript:;">Ruby进阶</a> <a href="javascript:;">RubyMine</a> </dd> </dl> <dl> <dt><a href="javascript:;" >Go</a></dt> <dd class="cf"> <a href="javascript:;">Go 基础</a> <a href="javascript:;">Revel</a> <a href="javascript:;">beego</a> </dd> </dl> <dl> <dt><a href="javascript:;" >Erlang</a></dt> <dd class="cf"> <a href="javascript:;">Erlang 基础</a> </dd> </dl> </div> </div> <div class="recommend-study"> <p class="list-title recommend-title"><span>推荐学习</span></p> <ul class="recommend"> </ul> </div> </div> </div> </li> <li> <div> <a href="javascript:;">人工智能</a> <div class="list-show"> <div class="knowledge-system"> <p class="list-title knowledge-title"><span>知识体系</span></p> <div> <dl> <dt><a href="javascript:;" >人工智能基础</a></dt> <dd class="cf"> <a href="javascript:;">行业解读</a> <a href="javascript:;">AWS人工智能简介</a> </dd> </dl> <dl> <dt><a href="javascript:;" >微软AI</a></dt> <dd class="cf"> <a href="javascript:;">人工智能概览</a> <a href="javascript:;">服务与API</a> <a href="javascript:;">数据分析</a> <a href="javascript:;">深度学习</a> </dd> </dl> <dl> <dt><a href="javascript:;" >百度AI</a></dt> <dd class="cf"> <a href="javascript:;">文字识别</a> <a href="javascript:;">人脸识别</a> <a href="javascript:;">图像审核</a> <a href="javascript:;">PaddlePaddle</a> </dd> </dl> </div> </div> <div class="recommend-study"> <p class="list-title recommend-title"><span>推荐学习</span></p> <ul class="recommend"> </ul> </div> </div> </div> </li> <li> <div> <a href="javascript:;">智能硬件 / 物联网</a> <div class="list-show"> <div class="knowledge-system"> <p class="list-title knowledge-title"><span>知识体系</span></p> <div> <dl> <dt><a href="javascript:;" >硬件架构</a></dt> <dd class="cf"> <a href="javascript:;">C51</a> <a href="javascript:;">ARM</a> <a href="javascript:;">Keil</a> <a href="javascript:;">Cortex-M</a> <a href="javascript:;">Cortex-A</a> <a href="javascript:;">AVR</a> </dd> </dl> <dl> <dt><a href="javascript:;" >物联网操作系统</a></dt> <dd class="cf"> <a href="javascript:;">RTOS</a> <a href="javascript:;">Android Wear</a> <a href="javascript:;">Apple Watchkit</a> </dd> </dl> <dl> <dt><a href="javascript:;" >开源硬件平台</a></dt> <dd class="cf"> <a href="javascript:;">Arduino</a> <a href="javascript:;">树莓派</a> <a href="javascript:;">mbed</a> <a href="javascript:;">GoKit</a> <a href="javascript:;">LeMaker Guitar</a> </dd> </dl> <dl> <dt><a href="javascript:;" >通信链接技术</a></dt> <dd class="cf"> <a href="javascript:;">无线WiFi</a> <a href="javascript:;">移动通信</a> <a href="javascript:;">蓝牙</a> <a href="javascript:;">NFC</a> </dd> </dl> <dl> <dt><a href="javascript:;" >信息感知处理技术</a></dt> <dd class="cf"> <a href="javascript:;">传感器</a> <a href="javascript:;">数据挖掘</a> </dd> </dl> <dl> <dt><a href="javascript:;" >人机交互技术</a></dt> <dd class="cf"> <a href="javascript:;">语音识别</a> <a href="javascript:;">人脸识别</a> <a href="javascript:;">手势识别</a> </dd> </dl> </div> </div> <div class="recommend-study"> <p class="list-title recommend-title"><span>推荐学习</span></p> <ul class="recommend"> </ul> </div> </div> </div> </li> <li> <div> <a href="javascript:;">设计 / 产品 / 测试</a> <div class="list-show"> <div class="knowledge-system"> <p class="list-title knowledge-title"><span>知识体系</span></p> <div> <dl> <dt><a href="javascript:;" >设计基础</a></dt> <dd class="cf"> <a href="javascript:;">Photoshop</a> <a href="javascript:;">Flash</a> <a href="javascript:;">Illustrator</a> <a href="javascript:;">Sketch</a> </dd> </dl> <dl> <dt><a href="javascript:;" >游戏设计</a></dt> <dd class="cf"> <a href="javascript:;">界面设计</a> <a href="javascript:;">角色设计</a> </dd> </dl> <dl> <dt><a href="javascript:;" >产品经理</a></dt> <dd class="cf"> <a href="javascript:;">需求分析</a> <a href="javascript:;">Axure</a> <a href="javascript:;">项目实战</a> </dd> </dl> <dl> <dt><a href="javascript:;" >视觉设计</a></dt> <dd class="cf"> <a href="javascript:;">应用UI设计</a> <a href="javascript:;">网页UI设计</a> <a href="javascript:;">设计理论</a> <a href="javascript:;">图形设计</a> </dd> </dl> <dl> <dt><a href="javascript:;" >测试工具</a></dt> <dd class="cf"> <a href="javascript:;">自动化测试</a> </dd> </dl> </div> </div> <div class="recommend-study"> <p class="list-title recommend-title"><span>推荐学习</span></p> <ul class="recommend"> </ul> </div> </div> </div> </li> <li> <div> <a href="javascript:;">云计算 / 大数据</a> <div class="list-show"> <div class="knowledge-system"> <p class="list-title knowledge-title"><span>知识体系</span></p> <div> <dl> <dt><a href="javascript:;" >云计算</a></dt> <dd class="cf"> <a href="javascript:;">OpenStack</a> <a href="javascript:;">Docker</a> <a href="javascript:;">CloudStack</a> <a href="javascript:;">Windows Azure</a> <a href="javascript:;">IaaS</a> </dd> </dl> <dl> <dt><a href="javascript:;" >大数据</a></dt> <dd class="cf"> <a href="javascript:;">Hadoop</a> <a href="javascript:;">Storm</a> <a href="javascript:;">Hive</a> <a href="javascript:;">Flume</a> <a href="javascript:;">Kafka</a> <a href="javascript:;">Zookeeper</a> <a href="javascript:;">Hbase</a> <a href="javascript:;">Spark</a> <a href="javascript:;">信息检索</a> <a href="javascript:;">数据分析</a> <a href="javascript:;">数据研发</a> </dd> </dl> <dl> <dt><a href="javascript:;" >虚拟化</a></dt> <dd class="cf"> <a href="javascript:;">VMware</a> </dd> </dl> <dl> <dt><a href="javascript:;" >SQL</a></dt> <dd class="cf"> <a href="javascript:;">MySQL</a> <a href="javascript:;">SQL Server</a> <a href="javascript:;">Oracle</a> <a href="javascript:;">SQLite</a> <a href="javascript:;">PostgreSQL</a> <a href="javascript:;">DB2</a> </dd> </dl> <dl> <dt><a href="javascript:;" >NoSQL</a></dt> <dd class="cf"> <a href="javascript:;">Cassandra</a> <a href="javascript:;">Redis</a> <a href="javascript:;">MongoDB</a> </dd> </dl> <dl> <dt><a href="javascript:;" >云平台</a></dt> <dd class="cf"> <a href="javascript:;">腾讯云</a> <a href="javascript:;">AWS</a> </dd> </dl> </div> </div> <div class="recommend-study"> <p class="list-title recommend-title"><span>推荐学习</span></p> <ul class="recommend"> </ul> </div> </div> </div> </li> <li> <div> <a href="javascript:;">技术支撑</a> <div class="list-show"> <div class="knowledge-system"> <p class="list-title knowledge-title"><span>知识体系</span></p> <div> <dl> <dt><a href="javascript:;" >基础语言</a></dt> <dd class="cf"> <a href="javascript:;">C</a> <a href="javascript:;">C++</a> <a href="javascript:;">Objective-C</a> <a href="javascript:;">Swift</a> <a href="javascript:;">C#</a> <a href="javascript:;">Java</a> <a href="javascript:;">Perl</a> <a href="javascript:;">Shell</a> <a href="javascript:;">Qt</a> <a href="javascript:;">Scala</a> </dd> </dl> <dl> <dt><a href="javascript:;" >计算机基础</a></dt> <dd class="cf"> <a href="javascript:;">计算机组成原理</a> <a href="javascript:;">网络工程</a> <a href="javascript:;">Word</a> <a href="javascript:;">Excel</a> <a href="javascript:;">PowerPoint</a> </dd> </dl> <dl> <dt><a href="javascript:;" >开发基础</a></dt> <dd class="cf"> <a href="javascript:;">算法基础</a> <a href="javascript:;">数据结构</a> <a href="javascript:;">设计模式</a> <a href="javascript:;">软件工程</a> </dd> </dl> <dl> <dt><a href="javascript:;" >开发工具</a></dt> <dd class="cf"> <a href="javascript:;">Git/Github</a> <a href="javascript:;">SVN</a> <a href="javascript:;">VI</a> </dd> </dl> <dl> <dt><a href="javascript:;" >开放标准</a></dt> <dd class="cf"> <a href="javascript:;">OpenCL</a> <a href="javascript:;">Open XML</a> <a href="javascript:;">OpenGL/GLES</a> </dd> </dl> <dl> <dt><a href="javascript:;" >计算机等级考试</a></dt> <dd class="cf"> <a href="javascript:;">一级</a> <a href="javascript:;">二级C</a> <a href="javascript:;">二级Java</a> <a href="javascript:;">二级C++</a> <a href="javascript:;">网络工程师</a> <a href="javascript:;">数据库工程师</a> <a href="javascript:;">信息安全工程师</a> </dd> </dl> <dl> <dt><a href="javascript:;" >企业认证</a></dt> <dd class="cf"> <a href="javascript:;">思科认证</a> <a href="javascript:;">Oracle认证</a> <a href="javascript:;">Linux认证</a> <a href="javascript:;">ARM认证</a> </dd> </dl> <dl> <dt><a href="javascript:;" >运维管理</a></dt> <dd class="cf"> <a href="javascript:;">Shell</a> <a href="javascript:;">自动化运维</a> <a href="javascript:;">Nginx</a> <a href="javascript:;">Apache</a> <a href="javascript:;">运维监控</a> </dd> </dl> <dl> <dt><a href="javascript:;" >商业智能</a></dt> <dd class="cf"> <a href="javascript:;">FileMaker</a> </dd> </dl> <dl> <dt><a href="javascript:;" >操作系统</a></dt> <dd class="cf"> <a href="javascript:;">Linux</a> <a href="javascript:;">Windows</a> <a href="javascript:;">Mac OS</a> </dd> </dl> <dl> <dt><a href="javascript:;" >企业服务</a></dt> <dd class="cf"> <a href="javascript:;">B2C</a> </dd> </dl> </div> </div> <div class="recommend-study"> <p class="list-title recommend-title"><span>推荐学习</span></p> <ul class="recommend"> </ul> </div> </div> </div> </li> </ul> </div> </div> <!--侧边分类结束--> </div> </div> </div> <script> //轮播 jQuery(".slideBox").slide({mainCell:".bd ul",effect:"left",autoPlay:true}); </script>