jQuery计算机网站分类导航图片轮播特效代码下载



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

25 96 33



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



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


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

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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