基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换。这是一款仿最新天猫商品分类导航控制banner图片切换代码。效果图如下：
部分代码：
<div class="yHeader">
<div class="yNavIndex">
<div class="pullDown">
<h2 class="pullDownTitle">
所有商品分类
</h2>
<ul class="pullDownList">
<li class="menulihover"><i class="listi1"></i><a href="" target="_blank">手机</a> /<a href="" target="_blank">数码</a> /<a href="" target="_blank">电脑办公</a> <span></span>
</li>
<li><i class="listi2"></i><a href="" target="_blank">女装</a> /<a href="" target="_blank">内衣</a>
<span></span></li>
<li><i class="listi3"></i><a href="" target="_blank">男装</a> /<a href="" target="_blank">运动户外</a>
<span></span></li>
<li><i class="listi4"></i><a href="" target="_blank">女鞋</a> /<a href="" target="_blank">男鞋</a>
/<a href="" target="_blank">箱包</a> <span></span></li>
<li><i class="listi5"></i><a href="" target="_blank">化妆品</a> /<a href="" target="_blank">个人护理</a>
<span></span></li>
<li><i class="listi6"></i><a href="" target="_blank">母婴玩具</a> <span></span></li>
<li><i class="listi7"></i><a href="" target="_blank">零食</a> /<a href="" target="_blank">进口食品</a>
/<a href="" target="_blank">酒</a> <span></span></li>
<li><i class="listi8"></i><a href="" target="_blank">大家电</a> /<a href="" target="_blank">生活电器</a>
<span></span></li>
<li><i class="listi9"></i><a href="" target="_blank">家具建材</a> <span></span></li>
<li><i class="listi10"></i><a href="" target="_blank">珠宝饰品</a> /<a href="" target="_blank">腕表眼镜</a>
<span></span></li>
<li><i class="listi11"></i><a href="" target="_blank">汽车</a> /<a href="" target="_blank">配件</a>
/<a href="" target="_blank">用品</a> <span></span></li>
<li><i class="listi12"></i><a href="" target="_blank">家纺</a> /<a href="" target="_blank">家饰</a>
/<a href="" target="_blank">鲜花</a> <span></span></li>
<li><i class="listi13"></i><a href="" target="_blank">医药保健</a> <span></span></li>
<li><i class="listi14"></i><a href="" target="_blank">厨具</a> /<a href="" target="_blank">收纳</a>
/<a href="" target="_blank">宠物</a> <span></span></li>
<li><i class="listi15"></i><a href="" target="_blank">图书音像</a> <span></span></li>
</ul>
<div class="yMenuListCon">
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
via：http://www.w2bc.com/Article/32809
基于jquery仿天猫分类导航banner切换的更多相关文章
- 基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
- Jquery仿京东分类导航层简单实现
<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script& ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
- 基于jQuery编写的横向自适应幻灯片切换特效
基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6. 适用浏览器:IE6.IE7.IE8.360.Fire ...
- 基于jquery的侧边栏分享导航
今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="slid ...
随机推荐
- JUC-闭锁：CountDownLatch
CountDownLatch::闭锁,在完成某些运算是,只有其他所有线程的运算全部完成,当前运算才继续执行. 实例化:参数:设置一个计数器的值. final CountDownLatch latch ...
- 创建Maven项目后，发现目录里面只有src/main/resources
创建Maven项目: 创建文件后,发现目录只有一个:缺少了src/main/java 和 src/test/java 百度后发现这个有效果,在本环境中只处理了第三步就可以了: 1.eclipse-&g ...
- 27、ArrayList和LinkedList的区别
在Java的List类型集合中,ArrayList和LinkedList大概是最常用到的2个了,细看了一下它们的实现,发现区别还是很大的,这里简单的列一下个人比较关心的区别. 类声明 ArrayLis ...
- C中字符串分割函数strtok的一个坑
strtok的典型用法是: p = strtok(s4, split); while(p != NULL){ printf("%s\n", p); p = strtok(NULL, ...
- xml2-config not found.
在Ubuntu下接着安装php时候,在configure后,又出现错误提示:error: xml2-config not found. Please check your libxml2 instal ...
- JS阻止冒泡方法(转)
S事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产生就一直往上浮,到在水平面时,它才消失.在这个过程中,如果 ...
- Tomcat配置+JSP页面模板修改UTF-8
A.修改Tomcat端口号步骤:1.找到Tomcat目录下的conf文件夹2.进入conf文件夹里面找到server.xml文件3.打开server.xml文件4.在server.xml文件里面找到下 ...
- iOS - App 与外设间的通信方式
1.前言 一般 iOS 开发者做 App 开发大部分时候都是通过 Http(s) 请求跟后台服务器打交道,做一些信息展示和用户交互.很少涉及到去跟外部硬件设备连接的开发.随着近年来车联网和物联网的兴起 ...
- iOS - PairProgramming 结对编程
1.PairProgramming 结对编程(Pair-Programming)可能是近年来最为流行的编程方式.所谓结对编程,也就是两个人写一个程序,其中,一个人叫 Driver,另一个人叫 Obse ...
- SQL 语句递归查询 With AS 查找所有子节点
create table #EnterPrise ( Department nvarchar(50),--部门名称 ParentDept nvarchar(50),--上级部门 Depar ...