基于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 ...
随机推荐
- Q1:Valid Parentheses
Question: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine i ...
- cygwin完全安装步骤方法（组图）
我们可以到Cygwin的官方网站下载Cygwin的安装程序,地址是: http://www.cygwin.com/ 或者直接使用下载连接来下载安装程序,下载连接是: http://www.cygwin ...
- Android C/C++ 开发
标准的做法是 把 src 放到 /Android/develop/ 目录下去,然后建立 Android.mk 文件, 然后 make modue ...., 但是,这种方式 太麻烦. 下面介绍一种方 ...
- CentOS 6.5上使用gdb调试时出现Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.132.el6.i686 .
在CentOS6.5上用gdb调试时提示Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.132.el6.i686先修改 ...
- Java 性能测试的四项原则
绝大数的开发人员在日常工作过程中都会或多或少的遇见过性能问题,本文旨在阐述性能测试的理论,从而为性能分析和开发人员做指导.本文对于那些刚刚接触性能调优和正在解决问题的开发人员也能提供一些启发性的思路. ...
- 【微信小程序】用户首次进入小程序拒绝授权，如何再次调用授权页面，获取用户信息userInfo
前言:微信小程序的app.js里面,最少有2个接口,一个wx.login:一个是wx.getUserInfo: 前者得到腾讯给我们的微信用户唯一的code,通过code获取openid,这个不需要用户 ...
- App上架重磅通知：App Store安全新规17年1月生效
作者:沙铭 来源:公众号 沙铭世界观 ID:mobview 做推广的也许并不了解什么是ATS(App Transport Security),不过这却是一个定时炸弹,引爆点在2016年底,后果就是你不 ...
- Model層資料驗證
概述 上节我们学习了Model的数据在界面之间的传递,但是很多时候,我们在数据传递的时候为了确保数据的有效性,不得不给Model的相关属性做基本的数据验证. 本节我们就学习如何使用 System.Co ...
- JS教程:window.location使用方法的区别
介绍了window.location使用方法的区别. window.location.href=&http://www.jbxue.com/javascript/ldquo;url”:改变ur ...
- app 图标规格参考表
转自:http://www.cocoachina.com/appstore/top/2012/1105/5031.html 像我一样记不住iOS应用图标像素尺寸的开发者不在少数,我经常需要查询不同设备 ...