手写仿淘宝商城页面（html+css+部分js）

一个练手项目，边看视频边写的。发着娱乐，不喜勿喷。

效果图：

代码如下

html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="CSS/index.css"><link rel="icon" href="淘宝.png"> <!-- 网址图标 --><title>淘宝网 - 淘！我喜欢</title>
</head>
<body><!-- 头部信息 --><div id="headMessage" class="layer clearfix "><ul class="fl"><li id="cdl_li01"><span id="area_change">中国大陆</span><span class="iconfont arrow"></span><div id="areasBox"><ul id="areas"><li>全球</li><li>中国大陆</li> <li>中国香港</li><li>中国澳门</li><li>中国台湾</li><li>韩国</li><li>马来西亚</li><li>澳大利亚</li><li>新加坡</li><li>新西兰</li><li>加拿大</li><li>美国</li><li>日本</li><li>法国</li><li>德国</li><li>瑞士</li></ul></div></li><li class="mr7"><a href="#" class="login mr7">亲，请登录</a><a href="#">免费注册</a></li><li><a href="#">手机逛淘宝</a></li></ul><ul class="fr"><li id="wdtb"><a href="#">我的淘宝</a><span class="iconfont arrow"></span><div id="mytbBox"><ul id="mytbbox_ul01"><li>已买到的宝贝</li><li>我的足迹</li></ul></div></li><li><span class="iconfont mr5 c4"></span><a href="shoppingCart.html">购物车</a><strong>0</strong><span class="iconfont arrow"></span></li><li id="scj"><a href="#"><span class="iconfont mr5 store"></span>收藏夹</a><span class="iconfont arrow"></span><div id="favorites"><ul id="favorites_ul"><li>收藏的宝贝</li><li>收藏的店铺</li></ul></div></li><li><a href="#">商品分类</a></li><li class="line">|</li> <li id="qnmjzx"><a href="#">千牛卖家中心</a><span class="iconfont arrow"></span><div id="sellerCenter"><ul id="sellerCenter_ul"><li>免费开店</li><li>已卖出的宝贝</li><li>出售中的宝贝</li><li>卖家服务市场</li><li>卖家培训中心</li><li>体检中心</li><li>问商友</li></ul></div></li><li id="lxkf"><a href="#">联系客服</a><span class="iconfont arrow"></span><div id="connect"><ul id="connect_ul"><li>消费者客服</li><li>商家服务大厅</li></ul></div></li><li><span class="iconfont c4 mr5"></span><a href="#">网站导航</a><span class="iconfont arrow"></span></li></ul></div><!-- 头部广告 --><div id="headAdvertise"><div class="layer clearfix"><a href="#" class="fl go"><img src="data:images/go.png" alt=""></a><ul class="fr"><li class="item1"><a href="#" class="fr"><img src="data:images/adimg_01.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li><li class="item2"><a href="#" class="fr"><img src="data:images/adimg_02.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li><li class="item3"><a href="#" class="fr"><img src="data:images/adimg_03.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li><li class="item4"><a href="#" class="fr"><img src="data:images/adimg_04.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li><li class="item5"><a href="#" class="fr"><img src="data:images/adimg_05.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li></ul></div></div><!-- 头部搜索 --><div id="headSearch"><div class="clearfix layer"><!-- 左 --><h1 class="fl"><a href="#">淘宝网</a></h1><!-- 右 --><div class="fr code"><span class="iconfont close"></span><span class="c5">手机淘宝</span><img src="data:images/code.png" alt=""></div><!-- 中间 --><div class="search"><!-- 上 --><ul class="searchTab clearfix" id="words_ul01"><li class="active" id="words_bb">宝贝</li><li id="words_tm">天猫</li><li id="words_dp">店铺</li></ul><!-- 中 --><div class="searchContent clearfix"><form action="#"><div class="searchBox fl"><input type="text" id="inputBox"> <!-- placeholder="网红裤腰带 洋气 国际范 9块9包邮" --><div class="placeholder" id="searchTemplate"><i class="iconfont"></i><span>网红裤腰带 洋气 国际范 9块9包邮</span></div><span class="iconfont imgSearch"></span></div><div class="btn fl"><button type="submit">搜索</button></div></form> </div><!-- 下 --><div class="hotKey"><a href="#">新款连衣裙</a><a href="#">四件套</a><a href="#" class="c5">潮流T恤</a><a href="#">时尚女鞋</a><a href="#">短裤</a><a href="#">半身裙</a><a href="#" class="c5">男士外套</a><a href="#">墙纸</a><a href="#">行车记录仪</a><a href="#">新款男鞋</a><a href="#">耳机</a><a href="#" class="c5">时尚女包</a><a href="#">沙发</a></div></div></div></div><!-- 导航 --><div id="nav" class="clearfix layer"><h2 class="fl">主题市场</h2><ul class="fl"><li class="size"><a href="#">天猫</a></li><li class="size"><a href="#">聚划算</a></li><li class="size"><a href="#">天猫超市</a></li><li class="line">|</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 class="line">|</li><li><a href="#">飞猪旅行</a></li><li><a href="#">智能生活</a></li><li><a href="#">苏宁易购</a></li></ul></div><!-- 首屏内容 --><div id="firstScreen" class="layer clearfix"><!-- 左边的内容 --><div class="firstLeft fl"><!-- 侧边导航 --><div class="sideNav fl"><ul><li><a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr"></span></li><li><a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span class="iconfont fr"></span></li><li><a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span class="iconfont fr"></span></li><li><a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span class="iconfont fr"></span></li><li><a href="#">美妆</a> / <a href="#">洗漱</a> / <a href="#">保健品</a><span class="iconfont fr"></span></li><li><a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span class="iconfont fr"></span></li><li><a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span class="iconfont fr"></span></li><li><a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span class="iconfont fr"></span></li><li><a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span class="iconfont fr"></span></li><li><a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span class="iconfont fr"></span></li><li><a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span class="iconfont fr"></span></li><li><a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span class="iconfont fr"></span></li><li><a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span class="iconfont fr"></span></li><li><a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span class="iconfont fr"></span></li><li><a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span class="iconfont fr"></span></li><li><a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span class="iconfont fr"></span></li></ul></div><!-- 图片1容器 --><div class="img1Box fr"><div class="img pic fl" id="showcase"><ul id="ul" class="slides"><li class="slide"><a href="#"><img src="data:images/lbpic_05.jpg" alt=""></a></li><li class="slide"><a href="#"><img src="data:images/lbpic_01.jpg" alt=""></a></li><li class="slide"><a href="#"><img src="data:images/lbpic_02.jpg" alt=""></a></li><li class="slide"><a href="#"><img src="data:images/lbpic_03.jpg" alt=""></a></li><li class="slide"><a href="#"><img src="data:images/lbpic_04.jpg" alt=""></a></li><li class="slide"><a href="#"><img src="data:images/lbpic_05.jpg" alt=""></a></li><li class="slide"><a href="#"><img src="data:images/lbpic_01.jpg" alt=""></a></li></ul><button class="iconfont leftBtn"></button><button class="iconfont rightBtn"></button><ul class="spots"><li class="spot"></li><li class="spot"></li><li class="spot"></li><li class="spot"></li><li class="spot"></li></ul></div><div class="ad fr"><a href="#"><img src="data:images/ad_02.jpg" alt=""></a></div></div><!-- 图片2容器 --><div class="img2Box fr"><div class="pic fl"><div class="picTitle"><div class="text clearfix"><span class="fl bg">理想生活上天猫</span><span class="fr"><i>1</i>/6</span></div><div class="line"><span></span></div></div><div class="img"><a href="#"><img src="data:images/pic_02.jpg" alt=""></a><a href="#"><img src="data:images/pic_03.jpg" alt=""></a></div><button class="iconfont leftBtn"></button><button class="iconfont rightBtn"></button></div><div class="ad fr"><p class="title">今日热卖</p><a href="#"><img src="data:images/ad_03.jpg" alt=""></a></div></div><!-- 淘宝头条 --><div class="news fl"><div class="hd fl"><h3>淘宝头条</h3><p>让你的生活更有趣</p></div><div class="newList fr"><div class="item"><a href="#" class="fl img"><img src="data:images/news_img_01.jpg" alt=""></a><h4><a href="#">微漫酱访谈第三期：超萌舞见弥音音</a></h4><p><a href="#">哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞见小姐姐来做客我们的访谈事，她就是弥音音！</a></p><a href="#" class="more">更多></a></div></div></div></div><!-- 右边的内容 --><div class="firstRight fr"><!-- 用户 --><div class="user"><a href="#" class="avatar"><img src="data:images/avatar.jpg" alt=""></a><p class="username">Hi！你好</p><p class="members"><a href="#" class="gold">领淘金币抵钱</a><a href="#" class="club">会员俱乐部</a></p><div class="btn"><a href="login.html" target="blank"><button class="login">登录</button></a><a href="register.html" target="blank"><button class="register">注册</button></a><button class="shop">开店</button></div></div><!-- 举报 --><a href="#" class="tipOff"><span>网上有害信息举报专区</span><i class="iconfont"></i></a><!-- 公告区 --><div class="notice"><ul class="title"><li class="active"><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><ul class="content clearfix"><li class="item1"><a href="#">天猫618进入热身 84个品牌在天猫共获粉丝4.3亿</a></li><li><a href="#">天猫618五折卖车</a></li><li><a href="#">天猫618直播间观看指南</a></li></ul></div><!-- 图标区域 --><table class="icon"><tr><td class="item1" id="chf"><a href="#"><span></span><i>充话费</i></a></td><td class="item2"><a href="#"><span></span><i>旅行</i></a></td><td class="item3"><a href="#"><span></span><i>车险</i></a></td><td class="item4"><a href="#"><span></span><i>游戏</i></a></td></tr><tr><td class="item5"><a href="#"><span></span><i>彩票</i></a></td><td class="item6"><a href="#"><span></span><i>电影</i></a></td><td class="item7"><a href="#"><span></span><i>酒店</i></a></td><td class="item8"><a href="#"><span></span><i>理财</i></a></td></tr><tr><td class="item9"><a href="#"><span></span><i>找服务</i></a></td><td class="item10"><a href="#"><span></span><i>演出</i></a></td><td class="item11"><a href="#"><span></span><i>水电煤</i></a></td><td class="item12"><a href="#"><span></span><i>火车票</i></a></td></tr></table><!-- APP --><div class="app"><div class="title clearfix"><h3 class="fl">阿里APP</h3><a href="#" class="fr">更多></a></div><ul class="appIcon"><li><a href="#"><img src="data:images/app_01.webp" alt=""></a></li><li><a href="#"><img src="data:images/app_02.png" alt=""></a></li><li><a href="#"><img src="data:images/app_03.png" alt=""></a></li><li><a href="#"><img src="data:images/app_04.png" alt=""></a></li><li><a href="#"><img src="data:images/app_05.png" alt=""></a></li><li><a href="#"><img src="data:images/app_06.png" alt=""></a></li><li><a href="#"><img src="data:images/app_07.jpg" alt=""></a></li><li><a href="#"><img src="data:images/app_08.png" alt=""></a></li><li><a href="#"><img src="data:images/app_09.png" alt=""></a></li><li><a href="#"><img src="data:images/app_10.png" alt=""></a></li></ul></div></div></div><!-- 有好货与爱逛街 --><div class="layer clearfix mt10"><!-- 有好货 --><div class="goods fl"><div class="head clearfix"><h3 class="fl"><img src="data:images/goods.png" alt="有好货"><span class="iconfont"></span><i>与品质生活不期而遇</i></h3><a href="#" class="fr change">换一换</a></div><ul class="list"><li><a href="#"><img src="data:images/shop_img_01.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont"></span><i>5920 人说好</i></a></li><li><a href="#"><img src="data:images/shop_img_02.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont"></span><i>5920 人说好</i></a></li><li><a href="#"><img src="data:images/shop_img_03.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont"></span><i>5920 人说好</i></a></li><li><a href="#"><img src="data:images/shop_img_04.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont"></span><i>5920 人说好</i></a></li><li><a href="#"><img src="data:images/shop_img_05.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont"></span><i>5920 人说好</i></a></li><li><a href="#"><img src="data:images/shop_img_06.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont"></span><i>5920 人说好</i></a></li></ul></div><!-- 爱逛街 --><div class="goods fr shopping"><div class="head cleafix"><h3 class="fl"><img src="data:images/shopping.png" alt="爱逛街"><span class="iconfont"></span><i>献给聪明可爱的你</i></h3><a href="#" class="fr change">换一换</a></div><ul class="list"><li><a href="#"><img src="data:images/shop_img_07.jpg" alt=""></a><p class="text"><span class="iconfont"></span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="data:images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="data:images/shop_img_08.jpg" alt=""></a><p class="text"><span class="iconfont"></span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="data:images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="data:images/shop_img_09.jpg" alt=""></a><p class="text"><span class="iconfont"></span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="data:images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="data:images/shop_img_10.jpg" alt=""></a><p class="text"><span class="iconfont"></span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="data:images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="data:images/shop_img_11.jpg" alt=""></a><p class="text"><span class="iconfont"></span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="data:images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="data:images/shop_img_12.jpg" alt=""></a><p class="text"><span class="iconfont"></span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="data:images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li></ul></div></div><!-- 右侧固定导航 --><div id="tool"><span class="iconfont"></span><div class="btn"><a href="#" class="c4 active">爱逛 好货</a><a href="#" class="c5">好店 直播</a><a href="#" class="c6">品质 特色</a><a href="#" class="c7">实惠 热卖</a><a href="javascript:void(0)" id="gotop">回到 顶部</a>  <!--页面不跳转--><a href="#" class="c4">猜你 喜欢</a><a href="#" class="item6">反馈</a><a href="#" class="">暴恐 举报</a></div>
</div><script src="JS/index.js"></script>
</body>
</html>

css部分：

默认设定样式：reset.css，方便后面直接使用

body,p,h1,h2,h3,h4{margin: 0;
}
ul{margin: 0;padding: 0;list-style: none;
}
img{border: none;vertical-align: middle;
}
a{text-decoration: none;color: #3c3c3c;
}
i{font-style: normal;
}
input,button{margin: 0;padding: 0;
}
button{outline: none;
}
table{border-collapse: collapse;
}
th,td{padding: 0;
}
body{font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;color: #3c3c3c;background-color: #f4f4f4;
}
.clearfix:after{content: '';display: block;clear: both;
}
.fl{float: left;
}
.fr{float: right;
}
/* 预定义class */
.layer{width: 1190px;margin: 0 auto;
}
/* 淘宝红 */
.c4{color: #f40;
}
.c5{color: #f50;
}
.c6{color: #8d7afb;
}
.c7{color: #a8c001;
}
.mr7{margin-right: 7px;
}
.mr5{margin-right: 5px;
}
.mt10{margin-top: 10px;
}
.mr10{margin-right: 10px;
}

主样式：

@import 'reset.css';@font-face {font-family: 'iconfont';src: url('iconfont.ttf?t=1631242042480') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}/* 头部信息 */
#headMessage li{float: left;line-height: 35px;padding: 0 6px;font-size: 0;
}
#headMessage a{color: #6c6c6c;font-size: 12px;
}
#headMessage a:hover{color: #f40;
}
#headMessage a.login{color: #f22e00;
}
#headMessage span{font-size: 12px;
}
#headMessage span.arrow{margin-left: 7px;
}
#headMessage li strong{font-size: 12px;color: #f22e00;
}
#headMessage li span.store{color: #9c9c9c;
}
#headMessage a:hover .store {color: #f40;
}
#headMessage li.line{font-size: 12px;color: #ddd;margin: 0 5px;
}/* 头部广告 */
#headAdvertise{background-color: #f12f04;
}
#headAdvertise .go{display: block;padding: 10px 10px 10px 15px;
}
#headAdvertise .go img{width: 80px;height: 80px;
}
#headAdvertise ul{padding-top: 15px;
}
#headAdvertise li{float: left;height: 75px;width: 209px;margin-right: 10px;padding: 12px 15px 0 15px;box-sizing: border-box;
}#headAdvertise li.item1{background: url(../images/adbg_01.png);
}
#headAdvertise li.item2{background: url(../images/adbg_02.png);
}
#headAdvertise li.item3{background: url(../images/adbg_03.png);
}
#headAdvertise li.item4{background: url(../images/adbg_04.png);
}
#headAdvertise li.item5{background: url(../images/adbg_05.png);margin-right: 0;
}#headAdvertise li h3{font-size: 20px;line-height: 28px;
}
#headAdvertise li a{color: #fff;display: block;
}
#headAdvertise li p{font-size: 14px;line-height: 20px;
}
#headAdvertise li a img{width: 52px;height: 52px;border-radius: 5px;
}/* 头部搜索 */
#headSearch{background-color: #fff;padding: 24px 0 10px 0;
}
#headSearch h1 a{display: block;width: 190px;height: 58px;background: url(../images/logo.png) center no-repeat; /* 以图代字 */text-indent: -9999px;overflow: hidden;margin-top: 8px;
}
#headSearch .code{width: 72px;height: 86px;border: 1px solid #eee;position: relative;margin-right: 110px;text-align: center;
}
#headSearch .code img{width: 62px;height: 62px;
}
#headSearch .close{position: absolute;left: -16px;top: -1px;width: 14px;height: 14px;line-height: 14px;font-size: 14px;border: 1px solid #eee;cursor: pointer;color: #ddd;
}
#headSearch .search{width: 630px;margin: 0 auto  ;
}
#headSearch .searchTab{height: 22px;padding-left: 17px;
}
#headSearch .searchTab li{float: left;width: 36px;line-height: 22px;margin-right: 4px;text-align: center;color: #f40;cursor: pointer;
}
#headSearch .searchTab li:hover{background-color: #ffeee5;
}
#headSearch .searchTab li.active{color: #fff;font-weight: bold;border-radius: 6px 6px 0 0; /* 圆角 */background-image: linear-gradient(to right,#ff9000,#ff5000); /* 渐变(兼容ie10+） */
}
#headSearch .searchContent{height: 40px;
}
#headSearch .searchBox{width: 554px;height: 40px;box-sizing: border-box;border: 2px solid #ff5000;border-right: none;border-radius: 20px 0 0 20px;overflow: hidden;position: relative;
}
#headSearch .searchBox input{width: 490px;height: 36px;line-height: 36px;outline: none;border: none;text-indent: 10px;position: absolute;z-index: 1;background-color: transparent; /* 透明，为了看见后面的文字 */
}
#headSearch .searchBox .placeholder{position: absolute;top: 6px;left: 14px;
}
#headSearch .searchBox .placeholder span{color: #9c9c9c;vertical-align: 1px;
}
#headSearch .searchBox .imgSearch{font-size: 28px;color: #9c9c9c;position: absolute;right: 20px;top: -2px;cursor: pointer;
}
#headSearch .searchContent button{width: 74px;height: 40px;text-align: center;font-size: 18px;line-height: 40px;color: #fff;border: none;background-image: linear-gradient(to right,#ff9000,#ff5000);border-radius: 0 20px 20px 0;
}
#headSearch .hotKey{height: 25px;line-height: 25px;
}
#headSearch .hotKey a:hover{color: #f50;
}/* 导航 */
#nav h2{width: 190px;height: 30px;line-height: 30px;font-size: 16px;color: #fff;text-align: center;background-color: #f50;
}
#nav ul{width: 1000px;background-image: linear-gradient(to right,#ff9000,#ff5000);}
#nav ul li{float: left;line-height: 30px;margin: 0 7px;font-size: 14px;color: #fff;position: relative;padding: 0 5px;
}
#nav ul li.size{font-size: 16px;
}
#nav ul a{color: #fff;font-weight: bold;
}
#nav ul li.line{margin: 0;padding: 0;
}
#nav ul li:hover::before{content: '';position: absolute;width: 23px;height: 13px;background-image: url(../images/ico_01.gif);top: -13px;left: 50%;margin-left: -12px;
}/* 首屏内容 */
/* 侧边导航 */
#firstScreen .firstLeft{width: 890px;
}.firstLeft .sideNav{width: 190px;height: 522px;background: #fff;border: 1px solid #ff5000;box-sizing: border-box;  /* 怪异盒子模型 */border-top: none;
}
.firstLeft .sideNav li{height: 32px;line-height: 32px;padding-left: 25px;color: #999;font-size: 14px;padding-top: 5px;transition: background-color 0.3s; /* 过渡 */
}
.firstLeft .sideNav li:hover{background: #ffe4dc;color: #f50;
}
.firstLeft .sideNav li:hover a{color: #f50;
}.firstLeft .sideNav a:hover{text-decoration: underline; /* 下划线 */
}.firstLeft .sideNav li a{font-size: 14px;color: #666;
}.firstLeft .sideNav li span{font-size: 12px;margin-right: 5px;
}/* 图片1容器 */
.firstLeft .img1Box{width: 690px;height: 282px;margin-top: 10px;
}
.firstLeft .pic{width: 520px;position: relative;
}
.firstLeft .img1Box .img{width: 520px;height: 280px;position: absolute;overflow: hidden;
}
ul.slides{font-size: 0;position: absolute;/* width: 3120px; */
}
ul.slides li.slide{display: inline-block;
}
.firstLeft .pic button{width: 20px;height: 30px;line-height: 30px;color: #fff;cursor: pointer;border: none;background-color: rgba(0,0,0,0.3);   /* 背景颜色透明 支持情况：IE9+ *//* background-color: #000\9;  IE9以下的浏览器认识 *//* filter: alpha(opacity=30);    透明 */position: absolute;top: 50%;margin-top: -15px;display: none;
}
.firstLeft .pic button.leftBtn{left: 0;border-radius: 0 15px 15px 0;
}
.firstLeft .pic button.rightBtn{right: 0;border-radius: 15px 0 0 15px;
}
.firstLeft .pic:hover button{display: block;
}
.firstLeft .pic .circle{position: absolute;bottom: 15px;left: 50%;margin-left: -35px;border-radius: 10px;padding: 3px 0;font-size: 0;background-color: rgba(255,255,255,0.3);
}
.firstLeft .pic .circle span{display: inline-block;width: 8px;height: 8px;border-radius: 50%;background-color: #fff;margin: 0 3px;cursor: pointer;
}
.firstLeft .circle span.active{background-color: #ff5000;
}
.firstLeft .ad{width: 160px;
}
.firstLeft .ad img{width: 160px;
}ul.spots {background-color: rgba(255,255,255,0.3);position:absolute;border-radius: 10px;bottom: 15px;font-size: 0;left: 50%;margin-left: -35px;cursor: pointer;}ul.spots li.spot{width: 8px;height: 8px;border-radius: 4px;background-color: #fff;display: inline-block;margin: 3px;
}
ul.spots li.spot.active{background-color: #ff5000;
}/* 图片2容器 */
.firstLeft .img2Box{width: 690px;height: 220px;margin-top: 10px;
}
.firstLeft .img2Box .picTitle{height: 20px;
}
.firstLeft .img2Box .picTitle .text{height: 17px;line-height: 17px;
}
.firstLeft .img2Box .picTitle .text .bg{background: url(../images/title_bg.png) no-repeat left;padding-left: 136px;color: #666;
}
.firstLeft .img2Box .picTitle .text i{color: #ff1648;
}
.firstLeft .img2Box .picTitle .line{height: 3px;background-color: #ff1648;position: relative;
}
.firstLeft .img2Box .picTitle .line span{position: absolute;left: 0;width: 87px;height: 3px;background-color: #000;
}
.firstLeft .img2Box .img{width: 520px;height: 200px;background-color: #fff;position: relative;/* display: table-cell;vertical-align: middle; */display: flex;justify-content: space-around;align-items: center; /* 弹性盒模型 兼容ie10+ */
}
.firstLeft .img2Box .ad .title{height: 20px;line-height: 20px;
}/* 淘宝头条 */
.firstLeft .news{width: 890px;height: 100px;background: #fff;margin-top: 10px;box-sizing: border-box;padding: 13px 13px 13px 20px;
}
.firstLeft .news .hd{margin-top: 15px;
}
.firstLeft .news .hd h3{width: 129px;height: 26px;background: url(../images/news_logo.png) no-repeat;text-indent: -9999px;overflow: hidden;
}
.firstLeft .news .hd p{color: #999;line-height: 24px;
}
.firstLeft .news .newList{width: 680px;position: relative;
}
.firstLeft .news .newList .img{margin-right: 15px;
}
.firstLeft .news .newList .img img{width: 130px;height: 73px;
}
.firstLeft .news .newList h4{line-height: 28px;font-size: 16px;font-weight: normal;
}
.firstLeft .news .newList h4 a{color: #333;
}
.firstLeft .news .newList h4 a:hover,.firstLeft .news .newList .more:hover{color: #ff5000;
}
.firstLeft .news .newList p{line-height: 18px;font-size: 14px;
}
.firstLeft .news .newList p a{color: #999;
}
.firstLeft .news .newList .more{position: absolute;top: 0;right: 0;color: #999;
}.firstRight{width: 290px;margin-top: 10px;
}
.firstRight .user{height: 140px;padding-top: 5px;background-image: url(../images/user_bg.png);
}
.firstRight .user .avatar{display: block;width: 50px;height: 50px;border-radius: 50%;overflow: hidden;margin: 0 auto;
}
.firstRight .user .username{text-align: center;line-height: 16px;
}
.firstRight .user .members{text-align: center;font-size: 0;
}
.firstRight .user .members a{display: inline-block;font-size: 12px;border-radius: 9px;/* background: #ffe4dc; */padding: 0 10px 0 20px;margin: 0 2px;
}
.firstRight .user .members a.gold{background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat;
}
.firstRight .user .members a.club{background: #ffe4dc url(../images/ico.png) 0 -528px no-repeat;
}
.firstRight .user .btn{text-align: center;
}
.firstRight .user .btn button{width: 75px;height: 25px;line-height: 25px;margin: 12px 2px 0 2px;color: #fff;font-weight: bold;border-radius: 4px;border: none;background-image: linear-gradient(to right,#ff9000,#ff5000);
}
.firstRight .user .btn button.login{width: 92px;
}/* 举报 */
.firstRight .tipOff{display: block;height: 26px;line-height: 26px;color: #f40;background: #ffe4dc;text-align: center;
}
.firstRight .tipOff i{font-size: 12px;vertical-align: 1px;position: relative;left: 30px;
}/* 公告区 */
.firstRight .notice{height: 108px;background-color: #fff;
}
.firstRight .notice .title{text-align: center;font-size: 0;padding-top: 10px;
}
.firstRight .notice .title li{display: inline-block;font-size: 12px;line-height: 20px;padding: 0 4px;margin: 0 10px;
}
.firstRight .notice .title li.active{font-weight: bold;border-bottom: 2px solid #f40;
}
.firstRight .notice .title li a:hover{color:#f40
}
.firstRight .notice .content{margin: 0 12px;padding-top: 10px;
}
.firstRight .notice .content li{height: 25px;line-height: 25px;overflow: hidden;float: left;width: 130px;
}
.firstRight .notice .content li.item1{width: 100%;
}
.firstRight .notice .content li a:hover{color: #ff5000;
}
.firstRight .notice .content li.item1 a{color: #ff5000;
}/* 图标区域 */
.firstRight .icon{width: 100%;height: 231px;background-color: #fff;table-layout: fixed; /* 定义列宽的算法，fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度 */
}
.firstRight .icon td{border: 1px solid #f4f4f4;text-align: center;
}
.firstRight .icon td span{display: block;width: 24px;height: 24px;margin: 0 auto;background: url(../images/ico.png) no-repeat;
}
.firstRight .icon td i{line-height: 34px;color: #333;
}
.firstRight .icon .item1 span{background-position: 0 0;
}
.firstRight .icon .item2 span{background-position: 0 -87px;
}
.firstRight .icon .item3 span{background-position: 0 -44px;
}
.firstRight .icon .item4 span{background-position: 0 -132px;
}
.firstRight .icon .item5 span{background-position: 0 -176px;
}
.firstRight .icon .item6 span{background-position: 0 -220px;
}
.firstRight .icon .item7 span{background-position: 0 -264px;
}
.firstRight .icon .item8 span{background-position: 0 -308px;
}
.firstRight .icon .item9 span{background-position: 0 -352px;
}
.firstRight .icon .item10 span{background-position: 0 -396px;
}
.firstRight .icon .item11 span{background-position: 0 -440px;
}
.firstRight .icon .item12 span{background-position: 0 -484px;
}/* APP */
.firstRight .app{height: 111px;background: #fff;
}
.firstRight .app .title{height: 30px;line-height: 30px;
}
.firstRight .app h3{font-size: 14px;padding-left: 14px;
}
.firstRight .app a{margin-right: 10px;
}
.firstRight .app a:hover{color: #f40;
}
.firstRight .app .appIcon{text-align: center;font-size: 0;
}
.firstRight .app .appIcon li{width: 32px;height: 32px;display: inline-block;margin: 0 10px 8px 10px;
}
.firstRight .app .appIcon li img{width: 32px;height: 32px;
}/* 有好货与爱逛街 */
/* 有好货 */
.goods{width: 590px;height: 658px;background-color: #fff;overflow: hidden;
}
.goods .head{height: 24px;line-height: 24px;margin: 20px 0;padding: 0 20px;
}
.goods .head h3{font-size: 0;font-weight: normal;
}
.goods .head h3 img{height: 24px;
}
.goods .head h3 span{vertical-align: middle;color: #ccc;font-size: 20px;margin: 0 5px;
}
.goods .head h3 i{font-size: 12px;vertical-align: middle;color: #999;
}
.goods .head .change{color: #999;
}
.goods .list{font-size: 0;text-align: center;
}
.goods .list li{width: 180px;display: inline-block;margin: 0 2px 35px 2px;text-align: left;
}
.goods .list li img{width: 180px;height: 180px;
}
.goods .list li h4{font-size: 16px;height: 28px;line-height: 28px;font-weight: normal;
}
.goods .list li h4 a:hover{color: #f40;
}
.goods .list li .text{height: 24px;line-height: 24px;font-size: 14px;overflow: hidden;
}
.goods .list li .text a{color: #999;
}
.goods .list li .comment{display: block;height: 22px;line-height: 22px;font-size: 12px;color: #35b1ff;margin-top: 12px;
}
.goods .list li .comment span{font-size: 14px;margin-right: 4px;
}/* 爱逛街 */
.shopping .list li .text{height: 44px;line-height: 22px;font-size: 14px;overflow: hidden;margin-top: 11px;;
}
.shopping .list li .text span{font-size: 14px;color: #ebebeb;position: relative;top: -5px;
}
.shopping .list li .text a:hover{color: #f40;
}
.shopping .list li .comment{color: #999;
}
.shopping .list li .comment img{width: 22px;height: 22px;border-radius: 50%;
}/* 右侧固定导航 */
#tool{width: 50px;height: 4000px;position: fixed;top: 100px;right: 5%;
}
#tool span{font-size: 32px;color: #ff7f13;width: 50px;height: 36px;line-height: 36px;text-align: center;position:absolute;top: -28px;
}
#tool div{height: 400px;border-radius: 8px;overflow: hidden;
}
#tool a{display: block;width: 50px;height: 50px;text-align: center;background: #fff;word-break: keep-all; /* 根据空格分行 */padding-top: 6px;box-sizing: border-box;position: relative;
}
#tool a:after{ /* 底部边框 */content: '';border-bottom: 1px solid #efefef;width: 34px;position: absolute;left: 8px;bottom: 0;
}
#tool a.item6{line-height: 40px;
}
#tool a:hover, #tool a.active{background-image: linear-gradient(135deg,#ff9000,#ff5000); /* 135°右下角渐变 */color: #fff;font-weight: bold;
}
#tool a:hover:after, #tool a.active:after{border: none;  /* 去边框 */
}/* 添加js之后 *//* 中国大陆 */
#areasBox {position: relative;z-index: 9999;display: none;
}
#areasBox #areas {position: absolute;left: -6px;top: 0;background-color: #fff;max-height: 200px;overflow-y: scroll;
}
#areasBox #areas li {width: 242px;height: 24px;font-size: 12px;line-height: 24px;padding-left: 5px;cursor: pointer;
}
#areasBox #areas li:hover {background-color: #F5F5F5;
}
#areasBox #areas li:first-child {margin-top: 10px;
}#rig_brm4,
#rig_brm4_ul {width: 100%;height: 155px;margin-left: 1px;
}
#rig_brm4_ul li {list-style: none;position: relative;float: left;width: 71px;height: 77px;border-style: solid;border-width: 1px;border-color: #F4F4F4 #F4F4F4 #F4F4F4 transparent;margin-left: -1px;margin-bottom: -1px;
}
#rig_brm4_ul li>a {display: block;width: 100%;height: 100%;text-align: center;
}
#rig_brm4_ul li>a span {display: block;margin-top: 10px;margin-bottom: 10px;font-size: 24px;
}
#rig_brm4_ul li:first-child>a span{color: #997AFF;
}
#rig_brm4_ul li:nth-child(2)>a span{color: #FFCF51;
}
#rig_brm4_ul li:nth-child(3)>a span{color: #26D7CB;
}
#rig_brm4_ul li:nth-child(4) span{color: #B2C91B;
}
#rig_brm4_ul li:nth-child(5) span{color: #CC8E81;
}
#rig_brm4_ul li:nth-child(6) span{color: #FD2ECA;
}
#rig_brm4_ul li:nth-child(7) span{color: #F2B931;
}
#rig_brm4_ul li:nth-child(8) span{color: #997AFF;
}
#rig_brm4_ul li a p {color: #3c3c3c;font-size: 12px;
}
#rig_brm4_box1,
#rig_brm4_box2,
#rig_brm4_box3 {position: relative;width: 286px;height: 148px;z-index: 999;background-color: #fff;border: 1px solid #FF6C05;border-top: 1px solid transparent;
}
#rig_brm4_box1 {top: -10px;left: -1px;display: none;
}
#rig_brm4_box1cont {margin-left: 15px;height: 100%;
}
#rb4b1c_01，
#rb4b1c_02 {width: 270px;height: 32px;line-height: 32px;
}
#rb4b1c_01 {margin-left: 5px;
}
#rb4b1c_01 a,
#rb4b1c_02 a {font-size: 12px;color: #666;
}
#rb4b1c_01 a {padding: 0 5px;
}
#rb4b1c_02 a {margin: 0 -1px;
}
#rb4b1c_01 a:hover,
#rb4b1c_02 a:hover {color: #FF6C05;
}
#rb4b1c_01 a:first-child,
#rb4b1c_02 a:first-child {color: #FF6C05;
}
#rb4b1c_02,
#rb4b1c_03 {width: 100%;height: 26px;line-height: 26px;
}
#rb4b1c_03 {margin-top: -1px;
}
#rb4b1c_02 input,
#rb4b1c_03 input {width: 181px;height: 22px;padding-left: 5px;outline: none;
}
#rb4b1c_02 span,
#rb4b1c_03 span {margin-left: -30px;color: #B7B7B7;
}
#autoc {position: absolute;top: 26px;left: 0;width: 177px;height: 34px;line-height: 34px;padding-left: 11px;border: 1px solid #ccc;background-color: #FFECE5;font-family: 'microsoft yahei';color: #FF4002;font-weight: 700;display: none;
}
#rb4b1c_04 {width: 100%;height: 30px;line-height: 30px;
}
#rb4b1c_04 i {font-style: normal;font-size: 14px;
}
#rb4b1c_04 i:first-child {color: #666;
}
#rb4b1c_04 i:nth-child(2) {color: #B7B7B7;font-family: "宋体";
}
#rb4b1c_04 i:nth-child(3) {color: #FF781E;font-weight: 700;
}
#rb4b1c_btn {width: 70px;height: 26px;line-height: 26px;text-align: center;border: 0;border-radius: 2px;outline: 0;background-color: #FF4400;color: #fff;font-size: 12px;font-weight: 700;cursor: pointer;
}
#rb4b1c_btn:hover {opacity: .8;
}
#x2 {position: absolute;top: 0;right: 0;font-style: normal;cursor: pointer;
}
#x2:hover {background-color: #F5F5F5;
}/* 我的淘宝,收藏夹，联系客服 */
#mytbBox,#favorites,#connect,#sellerCenter {position: relative;z-index: 999;display: none;
}
#mytbbox_ul01,#favorites_ul,#connect_ul,#sellerCenter_ul {position: absolute;top: 0;left: -6px;border: 1px solid #f5f5f5;border-top: 0;background-color: #fff;
}
#mytbbox_ul01 li,#favorites_ul li,#connect_ul li,#sellerCenter_ul li{width: 80px;height: 24px;line-height: 24px;color: #3c3c3c;cursor: pointer;margin-right: 0;font-size: 12px;
}
#mytbbox_ul01 li:hover,#favorites_ul li:hover,#connect_ul li:hover,#sellerCenter_ul li:hover {background-color: #f5f5f5;
}
#mytbbox_ul01 li:first-child,#favorites_ul li:first-child,#connect_ul li:first-child,#sellerCenter_ul li:first-child {margin-top: 10px;
}.wrapper{width: 520px;height: 280px;padding: 5px;margin: 100px auto;border: 1px solid #ccc;overflow: hidden;
}
.pic-box{width: 520px;height: 280px;position: relative;overflow: hidden;
}
.pic-box ul{width: 4000px;height: 100%;position: absolute;top:0;left: 0;
}
.pic-box li{float: left;
}
.circl{position: absolute;left: 50%;bottom: 10px;text-align: center;
}
.circl>span{display: inline-block;width: 8px;height: 8px;border-radius: 50%;background-color: #fff;margin: 3px;cursor: pointer;
}
.circl .current{background-color: #ff5500;
}
.arro-wrap{display:none;cursor: pointer;
}
.arro-wrap span{display: inline-block;position: absolute;top:50%;margin-top:-28px;width: 35px;height: 81px;background-color: #3c3c3c;opacity: 0.5;font-size: 20px;font-family: "SimSun";line-height: 81px;text-align: center;color:#FFF;
}
span.arr-per{           left: 0;
}
span.arr-next{right:0;
}

js部分：

js部分主要也就一个轮播图

//定位 中国大陆
//获取元素
let cdl_li01 = document.getElementById('cdl_li01');
let areasBox = document.getElementById('areasBox');
let areas = document.getElementById('areas');
let area_change = document.getElementById('area_change');
//注册鼠标经过事件
//这里需要用冒泡 所以用mouseover mouseout
cdl_li01.addEventListener('mouseover', function() {this.style.backgroundColor = '#fff';areasBox.style.display = 'block';//点击了全球 li的内容变成全球 for(let i = 0; i < areas.children.length; i++) {areas.children[i].addEventListener('click', function() {area_change.innerHTML = this.innerHTML;areasBox.style.display = 'none';});}
});
cdl_li01.addEventListener('mouseout', function() {this.style.backgroundColor = '#f5f5f5';areasBox.style.display = 'none';
});// 我的淘宝
let wdtb = document.getElementById('wdtb');
let mytbBox = document.getElementById('mytbBox');
//给li注册事件
//需要冒泡 鼠标经过 mouseover 鼠标离开 mouseout
wdtb.addEventListener('mouseover', function() {this.style.backgroundColor = '#fff';mytbBox.style.display = 'block';
});
wdtb.addEventListener('mouseout', function() {this.style.backgroundColor = '#f5f5f5';mytbBox.style.display = 'none';
});// 收藏夹
let scj = document.getElementById('scj');
let favorites = document.getElementById('favorites');
scj.addEventListener('mouseover', function() {this.style.backgroundColor = '#fff';favorites.style.display = 'block';
});
scj.addEventListener('mouseout', function() {this.style.backgroundColor = '#f5f5f5';favorites.style.display = 'none';
});// 千牛卖家中心
let qnmjzx = document.getElementById('qnmjzx');
let sellerCenter = document.getElementById('sellerCenter');
qnmjzx.addEventListener('mouseover', function() {this.style.backgroundColor = '#fff';sellerCenter.style.display = 'block';
});
qnmjzx.addEventListener('mouseout', function() {this.style.backgroundColor = '#f5f5f5';sellerCenter.style.display = 'none';
});// 联系客服
let lxkf = document.getElementById('lxkf');
let connect = document.getElementById('connect');
lxkf.addEventListener('mouseover', function() {this.style.backgroundColor = '#fff';connect.style.display = 'block';
});
lxkf.addEventListener('mouseout', function() {this.style.backgroundColor = '#f5f5f5';connect.style.display = 'none';
});// 搜索栏
let inputbox = document.getElementById('inputBox');
let searchTemplate = document.getElementById('searchTemplate');
// 检测用户表单输入内容 oninput是大部分浏览器支持  onpropertychange支持IE6、7、8
inputbox.oninput = inputbox.onpropertychange = function(){if(this.value == ''){searchTemplate.style.display = 'block';}else{searchTemplate.style.display = 'none';}
}// 返回顶部
let gotop = document.getElementById('gotop');
let timer = null;
let isTop = true;
//获取页面的可视窗口高度
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
//滚动条滚动时触发
window.onscroll = function(){//在滚动的时候增加判断let osTop = document.documentElement.scrollTop || document.body.scrollTop;//特别注意这句，忘了的话很容易出错if (osTop == 0) {gotop.style.display = 'none';}else{gotop.style.display = 'block';}if (!isTop) {clearInterval(timer);}isTop = false;
};
gotop.onclick = function(){//设置定时器timer = setInterval(function(){//获取滚动条距离顶部的高度let osTop = document.documentElement.scrollTop || document.body.scrollTop;  //同时兼容了ie和Chrome浏览器//减小的速度let isSpeed = Math.floor(-osTop / 6);document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;//console.log( osTop + isSpeed);isTop = true;//判断，然后清除定时器if (osTop == 0) {clearInterval(timer);}},30);
};// 轮播图
let slideWidth = 520;
let slides = document.querySelector('.slides');
let slidess = document.querySelectorAll('.slide');
let currentIndex = 1;
let leftBtn = document.querySelector('.leftBtn');
let rightBtn = document.querySelector('.rightBtn');
let showcase = document.querySelector('#showcase');
let prevTime = 0;
let auto;
let spots = document.querySelectorAll('.spot');// 过渡函数
function transitionMove() {slides.style.left = '-' + slideWidth * currentIndex + 'px';slides.style.transition = 'left 1s';
}// 定时器函数
function timeoutMove() {slides.style.left = '-' + slideWidth * currentIndex + 'px';slides.style.transition = 'none';
}// 设置轮播图区域函数
function setSlides() {slides.style.width = slideWidth * slidess.length + 'px';slides.style.left = '-' + slideWidth * currentIndex + 'px';spots[0].classList.add('active');
}// 展示下一幅图的函数
function showNextSlide() {currentIndex++;transitionMove();if(currentIndex == slidess.length -1) {currentIndex = 1;setTimeout(function() { //等待第6幅图的过渡效果timeoutMove();}, 1000)}setSpotActive();
}// 展示上一幅图的函数
function showPrevSlide() {currentIndex--;transitionMove();if(currentIndex == 0) {currentIndex = slidess.length - 2;setTimeout(function() { //等待第6幅图的过渡效果timeoutMove();}, 1000)}setSpotActive();
}// 所有事件绑定函数
function eventBind() {leftBtn.addEventListener('click',function() {// showPrevSlide();// 防抖节流throttle(showPrevSlide,1300)});rightBtn.addEventListener('click',function() {// showNextSlide();throttle(showNextSlide,1300)});showcase.addEventListener('click',function(e) {if(e.target.classList.contains('spot')) {let index = Array.prototype.indexOf.call(spots,e.target)currentIndex = index + 1;transitionMove();setSpotActive();}})showcase.addEventListener('mouseover',function() {pausePlay();});showcase.addEventListener('mouseout',function() {autoPlay();});
}// 自动轮播函数
function autoPlay() {auto = setInterval(function() {showNextSlide();},2000)
}
// 暂停轮播函数
function pausePlay() {clearInterval(auto)
}// 防抖节流函数
function throttle(fn,delay) {let now =Date.now();if(now - prevTime >= delay) {fn()prevTime = Date.now();}
}// 设置小圆点选中函数
function setSpotActive(){for(let i = 0;i < spots.length;i++) {if(i == currentIndex - 1) {spots[i].classList.add('active');}else {spots[i].classList.remove('active');}}
}// 初始化函数
function init() {setSlides();eventBind();autoPlay();
}
init();

用到的font图标：

手写仿淘宝商城页面（html+css+部分js）相关推荐

仿淘宝商城项目(分布式)
仿淘宝商城项目(分布式) 前言暑假枯燥的生活令我乏味,学完了Java框架的我按捺不住,准备做一个项目练练手,巩固并提高对所学知识的理解及运用. 想了几天,也参考网上的推荐,很多都是××管理系统.OA ...
jquery仿淘宝商城选择商品尺寸与大小颜色功能
jquery仿淘宝商城选择商品尺寸与大小颜色功能. 相关代码:https://download.csdn.net/download/pizilii/10537694 jquery代码调用: 1 2 3 ...
jQuery仿淘宝商城天猫鼠标移动过去，透明度降低
2019独角兽企业重金招聘Python工程师标准>>> 淘宝商城现在不叫淘宝商城了,天猫,感觉怪怪的,还是依然改不了口啊. 不知道哪天会改成天狗. jquery特效YY了下. htt ...
仿淘宝商城网站源码+附教程
介绍: 搭建简略步骤: 1.上传源码,解压源码 2.访问域名,进行安装, 按照提示输入数据库账号和密码 3.安装完成后默认账号admin 密码是你自己填写的设置的那个网盘下载地址: http://k ...
仿淘宝商城项目第一天
学习新的web项目,特此记录: 1:功能描述: 后台管理系统:管理商品.订单.类目.商品规格属性.用户管理以及内容发布等功能. 前台系统:用户可以在前台系统中进行注册.登录.浏览商品.首页.下单等操作 ...
HTML+CSS 仿写淘宝商城分类导航
效果图学会淘宝商城的分类导航以后,会发现大多数的电商网站都是这样的效果,在做其他网站时具体分析即可. 首先我们要构思整个大框架的结构:左边是全部商品分类,在这个分类中主要是用了导航列表(ul li) ...
今天过了淘宝商城的考试，嘿做点好事，公布些答案
有几个特别难找的题目就给图供大家参考. 其它的部分题目答案整理出来供大家参考. 1.商城商家,若未经淘宝同意在店铺公示"淘宝网战略合作伙伴"或"淘宝网唯一指定销售店铺&q ...
python大数据挖掘系列之淘宝商城数据预处理实战
在上一章节https://blog.csdn.net/qq_60168783/article/details/121824746 我们聊了python大数据分析的基本模块,下面就说说2个项目吧,第一个 ...
Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始我也迷糊了,通过查阅相关资料发现有好多种实现方法,下面小编给大家分享实例代码,感兴趣的朋友一起看看吧需要做一 ...
OSA品牌服饰旗舰店，淘宝商城一颗…
接触OSA品牌时间并不长, OSA品牌服饰旗舰店的页面让人耳目一新,而销售表现更是让人刮目相看,目前月销售额已突破3200万,超越韩都衣舍,跃居淘宝商城女装类销售NO.1,OSA 2008年开始和中国 ...

手写仿淘宝商城页面（html+css+部分js）

代码如下

手写仿淘宝商城页面（html+css+部分js）相关推荐

最新文章

热门文章