jQuery仿美乐乐家具商城网站左侧分类导航菜单和宽屏的图片轮播布局效果代码。这是一款红色通用的商城网站分类导航和图片banner顶部布局样式代码。
使用方法
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />2、head引入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.3.js" type="text/javascript" charset="utf-8"></script>3、body引入HTML代码
<div class="header"> <div class="menu-bar"> <div class="view"> <div class="category"> <h2>商品分类</h2> <ul class="category-option"> <li class="cat-item top-cat"> <div class="sub-cat clearfix"> <div class="sub-cat-links Left"> <ul class="sub-group clearfix"> <li class="Left sub-title"> <a href="#"><i class="i-t"></i>卧室</a> </li> <li class="Left sub-content"> <a href="#">床</a> <a href="#" style="color:#e62318 !important;">美国进口床垫</a> <a href="#" style="color:#e62318 !important;">美规床</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> </li> </ul> <ul class="sub-group clearfix"> <li class="Left sub-title"> <a href="#"><i class="i-t"></i>客厅</a> </li> <li class="Left sub-content"> <a href="#" style="color:#e62318 !important;">沙发</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="#" style="color:#e62318 !important;">客厅套装</a> </li> </ul> <ul class="sub-group clearfix"> <li class="Left sub-title"> <a href="#"><i class="i-t"></i>餐厅</a> </li> <li class="Left sub-content"> <a href="#">餐桌</a> <a href="#">餐椅</a> <a href="#" style="color:#e62318 !important;">餐厅套装</a> <a href="#">餐边柜</a> </li> </ul> <ul class="sub-group clearfix"> <li class="Left sub-title"> <a href="#"><i class="i-t"></i>书房</a> </li> <li class="Left sub-content"> <a href="#" style="color:#e62318 !important;">书桌/书台</a> <a href="#">书柜/书架</a> <a href="#">书椅/转椅</a> <a href="#">书房套装</a> </li> </ul> <ul class="sub-group clearfix"> <li class="Left sub-title"> <a href="#"><i class="i-t"></i>儿童房</a> </li> <li class="Left sub-content"> <a href="#">儿童床</a> <a href="#" style="color:#e62318 !important;">儿童床垫</a> <a href="#">儿童床头柜</a> <a href="#">儿童衣柜</a> <a href="#">儿童桌</a> <a href="#">儿童椅</a> <a href="#">儿童柜类</a> </li> </ul> <ul class="sub-group clearfix"> <li class="Left sub-title"> <a href="#"><i class="i-t"></i>户外/阳台</a> </li> <li class="Left sub-content"> <a href="#">户外椅</a> <a href="#" style="color:#e62318 !important;">户外套装</a> <a href="#">吊篮/吊椅</a> <a href="#">摇椅</a> <a href="#">藤艺家具</a> <a href="#">折叠床</a> </li> </ul> <ul class="sub-group clearfix"> <li class="Left sub-title"> <a href="#"><i class="i-t"></i>办公家具</a> </li> <li class="Left sub-content last"> <a href="#" style="color:#e62318 !important;">办公沙发</a> <a href="#">办公桌</a> <a href="#">文件柜</a> <a href="#">办公椅</a> <a href="#">保险柜</a> </li> </ul> </div> <div class="sub-cat-brand Left"> <h6>推荐品牌</h6> <div class="tag"> <a href="#" style="color:#cf000e !important">凯撒豪庭</a> <a href="#">北欧悠歌</a> <a href="#">白金宫殿</a> <a href="#">法兰西玫瑰</a> <a href="#">韩菲尔</a> <a href="#">卡富亚</a> <a href="#" style="color:#cf000e !important">蓝骑家居</a> <a href="#">卡洛林</a> <a href="#">青春城堡</a> <a href="#" style="color:#cf000e !important">宜华</a> <a href="#">木木原</a> <a href="#">蒂美悦</a> </div> <a href="#"><img src="statics/images/1.jpg" width="190" height="260"> </a> </div> </div> <i class="icon i0"></i> <a class="txt" href="#">家具</a> </li> <li class="cat-item "> <i class="icon i1"></i> <a class="txt" href="#">卧室</a> <a class="txt" href="#">床</a> <a class="txt" href="#">床垫</a> <a class="txt" href="#">衣柜</a> </li> <li class="cat-item "> <i class="icon i2"></i> <a class="txt" href="#">客厅</a> <a class="txt" href="#">沙发</a> <a class="txt" href="#">电视柜</a> </li> <li class="cat-item "> <i class="icon i3"></i> <a class="txt" href="#">餐厅</a> <a class="txt" href="#">餐桌</a> <a class="txt" href="#">餐椅</a> </li> <li class="cat-item "> <i class="icon i4"></i> <a class="txt" href="#">书房</a> <a class="txt" href="#">书桌</a> <a class="txt" href="#">书柜</a> </li> <li class="cat-item "> <i class="icon i5"></i> <a class="txt" href="#">儿童房</a> <a class="txt" href="#">儿童床</a> <a class="txt" href="#">儿童桌</a> </li> <li class="cat-item "> <i class="icon i6"></i> <a class="txt" href="#">户外/阳台</a> <a class="txt" href="#">办公家具</a> </li> <li class="cat-item top-cat"> <i class="icon i7"></i> <a class="txt" href="#">建材灯饰</a> </li> <li class="cat-item "> <i class="icon i8"></i> <a class="txt" href="#">灯饰照明</a> <a class="txt" href="#">吊灯</a> <a class="txt" href="#">吸顶灯</a> </li> <li class="cat-item "> <i class="icon i9"></i> <a class="txt" href="#">卫浴</a> <a class="txt" href="#">浴室柜</a> <a class="txt" href="#">座便器</a> </li> <li class="cat-item top-cat"> <i class="icon i10"></i> <a class="txt" href="#">家居家饰</a> </li> <li class="cat-item "> <i class="icon i11"></i> <a class="txt" href="#">床上用品</a> <a class="txt" href="#">布艺织物</a> </li> <li class="cat-item "> <i class="icon i12"></i> <a class="txt" href="#">家居饰品</a> <a class="txt" href="#">居家日用</a> </li> </ul> </div> <ul class="navigator"> <li class="current"> <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> <a href="#">体验馆</a> </li> <li> <a href="#">阅木</a> </li> <li> <a href="#">晒家</a> </li> <li> <a href="#">图览家居</a> </li> </ul> </div> </div> </div> <!--轮播--> <div class="scroll-banner" style="background:#227465"> <ul class="scroll-content"> <li class="scroll-item" style="background:#227465;display: block;"> <div class="scroll-index"> <a href="#"> <img class="sc-big fadeInR" src="statics/images/banner01.jpg"> </a> <div class="banner_r"> <a href="#"> <img src="statics/images/banner_r01.png"/> </a> <a href="#"> <img src="statics/images/banner_r02.png"/> </a> </div> </div> </li> <li class="scroll-item" style="background:#eef3f5"> <div class="scroll-index"> <a href="#"> <img class="sc-big fadeInR" src="statics/images/banner02.jpg"> </a> <div class="banner_r"> <a href="#"> <img src="statics/images/banner_r01.png"/> </a> <a href="#"> <img src="statics/images/banner_r02.png"/> </a> </div> </div> </li> <li class="scroll-item" style="background:#de3435"> <div class="scroll-index"> <a href="#"> <img class="sc-big fadeInR" src="statics/images/banner03.jpg"> </a> <div class="banner_r"> <a href="#"> <img src="statics/images/banner_r01.png"/> </a> <a href="#"> <img src="statics/images/banner_r02.png"/> </a> </div> </div> </li> <li class="scroll-item" style="background:#e8eaea"> <div class="scroll-index"> <a href="#"> <img class="sc-big fadeInR" src="statics/images/banner04.jpg"> </a> <div class="banner_r"> <a href="#"> <img src="statics/images/banner_r01.png"/> </a> <a href="#"> <img src="statics/images/banner_r02.png"/> </a> </div> </div> </li> <li class="scroll-item" style="background:#4f3a29"> <div class="scroll-index"> <a href="#"> <img class="sc-big fadeInR" src="statics/images/banner05.jpg"> </a> <div class="banner_r"> <a href="#"> <img src="statics/images/banner_r01.png"/> </a> <a href="#"> <img src="statics/images/banner_r02.png"/> </a> </div> </div> </li> <li class="scroll-item" style="background:#f2efea"> <div class="scroll-index"> <a href="#"> <img class="sc-big fadeInR" src="statics/images/banner06.jpg"> </a> <div class="banner_r"> <a href="#"> <img src="statics/images/banner_r01.png"/> </a> <a href="#"> <img src="statics/images/banner_r02.png"/> </a> </div> </div> </li> <li class="scroll-item" style="background:#179bf4"> <div class="scroll-index"> <a href="#"> <img class="sc-big fadeInR" src="statics/images/banner07.jpg"> </a> <div class="banner_r"> <a href="#"> <img src="statics/images/banner_r01.png"/> </a> <a href="#"> <img src="statics/images/banner_r02.png"/> </a> </div> </div> </li> <li class="scroll-item" style="background:#ffffff"> <div class="scroll-index"> <a href="#"> <img class="sc-big fadeInR" src="statics/images/banner08.jpg"> </a> <div class="banner_r"> <a href="#"> <img src="statics/images/banner_r01.png"/> </a> <a href="#"> <img src="statics/images/banner_r02.png"/> </a> </div> </div> </li> </ul> <div class="scroll-btn"> <span class="current"></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script type="text/javascript"> //左侧分类导航 $('.category-option .cat-item').hover(function(){$(this).toggleClass('hover')}) //图片轮播 jQuery(".scroll-banner").slide({mainCell:".scroll-content",titCell:".scroll-btn span",titOnClassName:"current",effect:"fold",autoPlay:true,delayTime:1000,interTime:3500}); </script>
