JQuery极果商城前端页面

  • 效果图
  • 技术点
  • HTML页面结构
  • CSS
    • reset.css
    • common.css
    • index.css
  • JavaScript
    • JQuery
    • json

效果图

技术点

本次项目实战尽可能的动态还原了极果商城的首页部分，使用到的前端知识包括HTML+CSS页面布局、元素浮动与清除浮动、轮播图的动画逻辑、Ajax异步请求数据、json数据编写

HTML页面结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="http://at.alicdn.com/t/font_2102123_gy13m3mq93k.css"><link rel="stylesheet" href="css/index.css"><script src="js/jquery.js"></script><script src="js/common.js"></script>
</head>
<body><!-- 头部 --><header><div class="head-top"><div class="inner"><div class="logo"><h1><a href="index.html">极果</a></h1></div><div class="nav"><ul><li class="active"><a href="index.html">首页</a></li><li><a href="#">酷玩</a></li><li><a href="#">导购</a></li><li><a href="#">试用</a></li><li><a href="#">报告</a></li></ul></div><a href="login.html" class="login">注册</a><span class="search"><i class="icon iconfont icon-fangdajing1"></i></span></div></div><div class="banner"><div class="inner"><h2>幻响小贝HIFI2.1音箱</h2><p class="label"><span>123人申请</span><span>￥500</span><span>20台</span></p><p class="time">申请时间剩余：13天5小时37分钟</p><a href="#" class="btn">立即申请</a></div></div></header><main><div class="hot-box"><div class="inner"><h2 class="title">热门试用</h2><div class="slide-box"><a href="javascript:void(0)" class="prev"></a><a href="javascript:void(0)" class="next"></a><div class="hot"><ul><li class="item1"><a href="#" class="con"><span class="top-tip sf">首发</span><img src="./img/hot1.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="red">2000</span><span class="red">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current red">剩余时间2天</p></a><a href="#" class="con"><span class="top-tip ty">体验师专享</span><img src="./img/hot2.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="green">2000</span><span class="green">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current green">剩余时间2天</p></a><a href="#" class="con"><span class="top-tip sf">首发</span><img src="./img/hot3.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="red">2000</span><span class="red">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current red">剩余时间2天</p></a><a href="#" class="con" style="margin-right: 0;"><span class="top-tip sf">首发</span><img src="./img/hot4.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="red">2000</span><span class="red">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current red">剩余时间2天</p></a></li><li class="item2"><a href="#" class="con"><span class="top-tip sf">首发</span><img src="./img/hot5.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="red">2000</span><span class="red">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current red">剩余时间2天</p></a><a href="#" class="con"><span class="top-tip ty">体验师专享</span><img src="./img/hot6.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="green">2000</span><span class="green">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current green">剩余时间2天</p></a><a href="#" class="con"><span class="top-tip sf">首发</span><img src="./img/hot6.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="red">2000</span><span class="red">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current red">剩余时间2天</p></a><a href="#" class="con" style="margin-right: 0;"><span class="top-tip sf">首发</span><img src="./img/hot8.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="red">2000</span><span class="red">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current red">剩余时间2天</p></a></li><li class="item3"><a href="#" class="con"><span class="top-tip sf">首发</span><img src="./img/hot9.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="red">2000</span><span class="red">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current red">剩余时间2天</p></a><a href="#" class="con"><span class="top-tip ty">体验师专享</span><img src="./img/hot10.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="green">2000</span><span class="green">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current green">剩余时间2天</p></a><a href="#" class="con"><span class="top-tip sf">首发</span><img src="./img/hot11.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="red">2000</span><span class="red">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current red">剩余时间2天</p></a><a href="#" class="con" style="margin-right: 0;"><span class="top-tip sf">首发</span><img src="./img/hot12.jpg" alt=""><h2 class="name">巴慕达 The Toaster 烤面包机</h2><p class="label"><span class="red">2000</span><span class="red">20台</span></p><p class="sq"><span class="red">4312</span><span>申请</span></p><p class="current red">剩余时间2天</p></a></li></ul></div></div></div></div><div class="report-box common"><div class="inner"><h2 class="title">报道精选</h2><a href="#" class="more">查看更多</a><i class="icon iconfont icon-caidanlan"></i><ul><li><img src="./img/bg1.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left nick">*苏苏</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg2.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left nick">*苏苏</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg3.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left nick">*苏苏</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg4.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left nick">*苏苏</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg5.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left nick">*苏苏</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg6.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left nick">*苏苏</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg7.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left nick">*苏苏</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg8.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left nick">苏苏</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li></ul></div></div><div class="guide common"><div class="inner"><h2 class="title">导购精选</h2><a href="#" class="more">查看更多</a><i class="icon iconfont icon-caidanlan"></i><ul><li><img src="./img/bg1.jpg" alt=""><div class="info list"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg2.jpg" alt=""><div class="info list"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg3.jpg" alt=""><div class="info list"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg4.jpg" alt=""><div class="info list"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li></ul></div></div><div class="fx-box common"><div class="inner"><h2 class="title">发现酷玩</h2><a href="#" class="more">查看更多</a><i class="icon iconfont icon-caidanlan"></i><ul><li><img src="./img/bg1.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg2.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg3.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg4.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg5.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg6.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg7.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg8.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left nick">苏苏</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg1.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg2.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg3.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg4.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg5.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg6.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg7.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li><li><img src="./img/bg8.jpg" alt=""><div class="info"><p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p><div class="fix"><span class="left price">￥1200</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li></ul><div class="more-button"><a href="javascript:void(0)" class="comMore cl">点击加载更多</a></div></div></div></main><footer><div class="down-box"><div class="inner"><div class="fix"><dl><img src="./img/code.png" alt="" width="160" height="160"></dl><dl><dt><img src="./img/logoImg.jpg" alt=""></dt><dd>全球酷玩导购试用平台<br>酷.新奇.好玩.品质</dd><dd style="margin-top: 13px;">微信添加"jguojguo"<br>获取我们的服务</dd></dl><dl><dt>免费试用</dt><dd>试用流程</dd><dd>如何提高成功率</dd></dl><dl><dt>友情链接</dt><dd><a href="#">智东西</a><a href="#">WEIBUSI</a></dd><dd><a href="#">搜狐IT</a><a href="#">腾讯科技</a></dd><dd><a href="#">搜狐数码</a><a href="#">凤凰科技</a></dd><dd><a href="#">凤凰数码</a><a href="#">PConline</a></dd><dd><a href="#">泡泡网</a><a href="#">3W咖啡</a></dd><dd><a href="#">ZUK社区</a><a href="#">亿觅emie</a></dd><dd><a href="#">极客公园</a><a href="#">易迅意启航</a></dd><dd><a href="#">果库</a></dd></dl><dl><dt>购买攻略</dt><dd><a href="#">美亚海淘教程</a></dd><dd><a href="#">日亚海淘教程</a></dd><dd><a href="#">海淘转运攻略</a></dd><dd><a href="#">kickstarter 众筹购买攻略</a></dd><dd><a href="#">indiegogo 众筹购买攻略</a></dd></dl><dl><dt>厂商合作</dt><dd><a href="#">关于极果</a></dd><dd><a href="#">联系我们</a></dd><dd><a href="#">商务合作：BD@jiguo.com</a></dd><dd><a href="#">CEO邮箱：CEO@jiguo.com</a></dd></dl><dl></dl></div></div></div></footer><a href="javascript:void(0)" id="backTop"></a>
</body>
</html>

CSS

reset.css

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote, /* structural elements 结构元素 */
dl,dt,dd,ul,ol,li, /*list elements 列表元素*/
pre, /*text formatting elements 文本格式元素*/
fieldset,button,input,textarea, /*form elements 表单元素*/
th,td { /*table elements 表格元素*/margin: 0;padding: 0;
}body,
button, input, select, textarea{ /*for ie*//*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /*用ASCII码表示*/
}h1{font-size: 18px;}
h2{font-size: 16px;}
h3{font-size: 14px;}
h4, h5, h6{font-size: 100%;}address, cite, dfn, em, var{font-style: normal;}/*将斜体扶正*/
code, kbd, pre, samp, tt{font-family: 'Courier New', Courier, monospace;}
small{font-size: 12px;} /*让small的字号正常*//* 重置列表元素 */
ul, ol{list-style: none;}/* 重置文本格式元素 */
a{text-decoration: none;}
/* a:hover{text-decoration: underline;} */abbr[title], acronym[title]{border-bottom: 1px dotted;cursor: help;
}q:before, q:after{content: "";}/* 重置表单元素 */
legend{color: #000000;}
fieldset, img{border: none;}button, input, select, textarea{font-size: 100%;
}/* 重置表格元素 */
table{border-collapse: collapse;border-spacing: 0;
}/* 重置hr */
hr{border: none;height: 1px;
}/* 让非IE浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html{vertical-align: scroll;}

common.css

@keyframes fade{0%{opacity: 1;}50%{opacity: 0.5;}100%{opacity: 1;}
}
@-webkit-keyframes fade{0%{opacity: 1;}50%{opacity: 0.5;}100%{opacity: 1;}
}
@-moz-keyframes fade{0%{opacity: 1;}50%{opacity: 0.5;}100%{opacity: 1;}
}
@-ms-keyframes fade{0%{opacity: 1;}50%{opacity: 0.5;}100%{opacity: 1;}
}header,main,footer{width: 100%;
}
header{overflow: hidden;
}
.inner{width: 1002px;margin: 0 auto;
}
header .head-top{width: 100%;height: 74px;background-color: #ffffff;
}
.head-top .inner{height: 74px;
}
.head-top .inner .logo{width: 134px;height: 74px;float: left;background-color: #ffffff;
}
.head-top .inner .logo:hover{animation: fade 1s linear infinite;
}
.head-top .inner .logo h1{width: 134px;height: 74px;background-image: url(../img/logo_02.png);
}
.head-top .inner .logo h1 a{display: block;width: 134px;height: 74px;text-indent: -3000px;
}
.head-top .inner .nav{width: 400px;height: 74px;float: left;margin-left: 65px;background-color: #ffffff;
}
.head-top .inner .nav ul li{float: left;padding-top: 34px;margin-right: 50px;font-size: 20px;
}
.head-top .inner .nav ul li:last-child{margin-right: 0;
}
.head-top .inner .nav ul li a{color: #000000;
}
.head-top .inner .nav ul .active a{color: #ff3a35;
}
.head-top .inner .nav ul li a:hover{color: #ff3a35;text-decoration: none;
}
.search .icon{float: right;margin-top: 25px;margin-right: 34px;font-size: 25px;cursor: pointer;transition: all .1s linear;
}
.search .icon:hover{font-size: 28px;
}
.login{float: right;display: block;width: 50px;height: 30px;border: 1px solid #fa553f;font-weight: bold;text-align: center;line-height: 30px;border-radius: 2px;color: #fa553f;margin-top: 21px;
}
.login:hover{background-color: #fa553f;color: #ffffff;
}
main{overflow: hidden;
}
.con{width: 220px;height: 285px;display: block;border-radius: 6px;position: relative;overflow: hidden;float: left;margin-right: 40px;
}
.con img{width: 220px;height: 135px;
}
.con .top-tip{position: absolute;top: 0;right: 0;padding: 4px 8px;border-radius: 0 0 0 6px;z-index: 10;
}
.con .sf{background-color: red;color: white;
}
.con .ty{background-color: #f7f2ca;color: #cdc295;
}
.con .name{padding: 8px;text-align: center;color: #000000;
}
.con img:hover{animation: fade 2s linear infinite;
}
.con .label{text-align: center;
}
.con .label span{display: inline-block;padding: 6px 10px;border-radius: 4px;
}
.con .red{color: red;
}
.con .label .red{color: red;border: 1px solid red;
}
.con .label .green{color: green;border: 1px solid green;
}
.con .green{color: green;
}
.con .sq{padding: 10px 0;text-align: center;font-size: 18px;
}
.con .current{text-align: center;font-size: 18px;
}
.common ul{overflow: hidden;
}
.common ul li{width: 222px;height: 233px;float: left;margin: 0 34px 20px 0;border-radius: 6px;background-color: white;border: 1px solid #ccc;
}
.common img{width: 222px;height: 130px;border-radius: 6px;
}
.common ul li:nth-child(4n+4){margin-right: 0;
}
.common ul li .info{padding: 10px;height: 98px;
}
.common ul li .list{background: url(../img/listbg.jpg) no-repeat left bottom;
}
.common ul li .info .name{font-size: 14px;line-height: 20px;margin-bottom: 15px;
}
.common ul li .info .left{float: left;
}
.common ul li .info .price{color: red;
}
.common ul li .info .right{float: right;
}
.common ul li .info .right span{padding-left: 15px;color: #999;
}
.common ul li .info .right .xin{background: url(../img/xin.png) no-repeat left center;
}
.common ul li .info .right .look{background: url(../img/reply.png) no-repeat left center;
}
.common .more-button{text-align: center;padding-bottom: 20px;
}
.common .more-button .comMore{color: red;padding-left: 20px;
}
.common .more-button .cl{background: url(../img/more.png) no-repeat center left;
}
.common .more-button .loading{background: url(../img/loading-icon.gif) no-repeat center left;
}
.common .more-button .no-more{color: #cccccc;
}
footer{height: 360px;background-color: #505050;
}
footer .down-box{padding: 40px 0 15px;
}
footer .down-box dl:first-child{padding-left: 0;
}
footer .down-box dl{float: left;padding-left: 40px;
}
footer .down-box dl:nth-child(4) a{display: inline-block;width: 69px;
}
footer .down-box dl dt{color: #ffffff;font-size: 16px;padding-bottom: 25px;
}
footer .down-box dl dd{color: #a3a3a3;text-align: left;line-height: 20px;
}
footer .down-box dl dd a{color: #a3a3a3;
}

index.css

@keyframes rotateIn{0%{transform: translate(800px,-800px);}100%{transform: translate(0,0);}
}
@-webkit-keyframes rotateIn{0%{transform: translate(800px,-800px);}100%{transform: translate(0,0);}
}
@-moz-keyframes rotateIn{0%{transform: translate(800px,-800px);}100%{transform: translate(0,0);}
}
@-ms-keyframes rotateIn{0%{transform: translate(800px,-800px);}100%{transform: translate(0,0);}
}header .banner{width: 100%;height: 300px;border-bottom: 1px solid #d4cec2;box-shadow: 0px 0px 5px #cecfcf inside;background: url(../img/original.jpg)center top;
}
header .banner .inner{height: 254px;padding-top: 46px;text-align: right;animation: rotateIn 1s;
}
header .banner .inner h2{font-size: 34px;margin-bottom: 15px;color: white;
}
header .banner .inner .label{margin-bottom: 22px;
}
header .banner .inner .label span{display: inline-block;padding: 10px;background-color: rgba(255,255,255,0.2);margin-right: 14px;border-radius: 2px;color: white;
}
header .banner .inner .time{color: white;font-size: 18px;margin-bottom: 20px;
}
header .banner .inner .btn{display: inline-block;width: 240px;height: 46px;line-height: 46px;text-align: center;color: white;background-color: #fe5341;font-size: 24px;
}
main .hot-box{width: 100%;height: 380px;
}
main .hot-box .inner{height: 380px;
}
main .inner .title{height: 70px;line-height: 70px;font-size: 24px;
}
main .hot-box .inner .slide-box{height: 288px;width: 100%;position: relative;
}
main .hot-box .inner .slide-box .prev,
main .hot-box .inner .slide-box .next{display: block;width: 37px;height: 78px;position: absolute;top: 120px;
}
main .hot-box .inner .slide-box .prev{background: url(../img/prev.png);left: -60px;
}
main .hot-box .inner .slide-box .next{background: url(../img/next.png);right: -60px;
}
main .hot-box .inner .slide-box .hot{width: 100%;height: 288px;overflow: hidden;
}
main .hot-box .inner .slide-box ul{width: 3006px;height: 288px;position: relative;/* margin-left: -1002px; */
}
main .hot-box .inner .slide-box ul li{width: 1002px;height: 288px;float: left;
}
main .report-box{width: 100%;height: 590px;background-color: #dddddd;
}
main .report-box .inner{height: 590px;
}
main .inner{position: relative;
}
main .inner .more{position: absolute;top: 28px;right: 18px;color: red;
}
main .inner .icon{position: absolute;top: 26px;right: 0;color: red;cursor: pointer;
}
main .guide{height: 380px;
}
main .guide .inner{height: 380px;
}
main .fx-box{overflow: hidden;width: 100%;background-color: #dddddd;
}#backTop{display: none;width: 50px;height: 50px;background: #cccccc url(../img/back.png) no-repeat center center;position: fixed;right: 100px;top: 600px;transition: all .2s linear;border-radius: 4px;
}
#backTop:hover{background: #999999 url(../img/back.png) no-repeat center center;
}

JavaScript

JQuery

// 面向过程$(function() {var slide={stop:true,//控制是否继续执行animate:false,//判断是否执行动画prevEvent:function(){var prev=$(".prev")prev.click(function() {var ul = $(".hot ul");if(slide.animate) return;slide.animate=true;// 现将最后一个li放到首位ul.find("li").last().prependTo(ul)// 在将首位li隐藏ul.css("left","-1002px")ul.animate({left:0},800,function() {slide.animate=false;})})},nextEvent:function() {var next=$(".next")next.click(function() {var ul = $(".hot ul");if(slide.animate) return;slide.animate=true;ul.animate({left: "-1002px"},800,function() {// 将移走的第一个li移动到ul的后面ul.find("li").eq(0).appendTo(ul)// 再将原本已经移动过的ul还原ul.css("left",0);slide.animate=false;})})},init:function() {setInterval(function() {if(slide.stop) return;if(slide.animate) return;slide.animate=true;var ul = $(".hot ul");ul.animate({left: "-1002px"},800,function() {// 将移走的第一个li移动到ul的后面ul.find("li").eq(0).appendTo(ul)// 再将原本已经移动过的ul还原ul.css("left",0);slide.animate=false;}) },2000)$(".slide-box").mouseover(function() {slide.stop=true;})$(".slide-box").mouseout(function() {slide.stop=false;})this.prevEvent();//添加翻页功能this.nextEvent();}}slide.init();//ajax请求数据var indexNum = 0;//统计当前请求次数$(".comMore").click(function() {var self = $(this);self.html("正在加载...").removeClass("cl").addClass("loading");$.ajax({type:"post",url:"json/json.js",dataType:"json",success:function(data) {var data1 = data[indexNum];var param = "";for(var i = 0; i < data1.length; i ++) {param += '<li><img src="'+data1[i].img+'" widt"222" height="130"><div class="info"><p class="name">'+data1[i].text+'</p><div class="fix"><span class="left price">'+data1[i].price+'</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li>'}self.parent().prev().append(param);indexNum++self.html("点击加载更多").removeClass("loading").addClass("cl");if(indexNum >= data.length) {self.parent().html("<span class='no-more'>没有更多</span>");}}})})//返回顶部按钮$(window).scroll(function() {if($(window).scrollTop()>100) {$("#backTop").show();}else{$("#backTop").hide();}})$("#backTop").click(function() {$("html,body").animate({scrollTop:0},800)})
})

json

[[{"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},{"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},{"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},{"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},{"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},{"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},{"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},{"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"}],[{"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},{"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},{"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},{"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},{"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},{"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},{"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},{"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"}],[{"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},{"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},{"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},{"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},{"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},{"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},{"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},{"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"}],[{"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},{"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},{"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},{"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},{"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},{"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},{"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},{"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"}]
]

JQuery极果商城项目实战（附完整代码）相关推荐

  1. 【JavaSE】如何实现简易的零钱通项目？附完整代码

    本篇主要解决内容: 使用面向过程的思路完成零钱通项目⭐️ 使用面向对象的思路完成零钱通项目⭐️ ❤️ 个人主页:Nezuko627的博客 欢迎来访~~~ 文章目录 1 零钱通项目介绍 2 面向过程方式 ...

  2. jQuery的Ajax实例（附完整代码）

    目录 写在前边 什么是Ajax Ajax基本结构 实例 实例1 实例2 小结 写在前边 作为一个前端刚入门没多久的小白,想在这里分享一下我的学习内容,就算是学习笔记了.因为前端的大部分学习都是通过网站 ...

  3. CV项目肢体动作识别（三）内附完整代码和详细讲解

    CV项目肢体动作识别(三)内附完整代码和详细讲解 首先我还是给出完整的代码,然后再进行详细的讲解.这一次我们用模块化的思想,把一个功能模块化(moudle),这种思想在工程中非常常见,在分工中你需要做 ...

  4. 如何实现一个React全家桶项目（附完整教程及代码）

    文章目录 如何实现一个React全家桶项目(附完整教程) 1.相关命令: 运行项目: `yarn start` 项目打包: `yarn build` 暴露配置项: `yarn eject` 2.项目目 ...

  5. 全力升级篇-基于Mongodb与Nginx负载均衡打造共享单车项目实战 最新完整项目升级版

    全力升级篇-基于Mongodb与Nginx负载均衡打造共享单车项目实战 最新完整项目升级版 课程作为全新的升级项目课程,基于Nginx负载均衡,Flume与Kafka,Mongodb和Redis等技术 ...

  6. Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）

    Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果 二.Three.js简介 三.Three.js代码正常运行显示条件 (1)不载入 ...

  7. Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）

    Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六.完整构建整个[旋转的精灵女孩]实例 (1).新建.启动webGL工程空间 (2).构建项目的目录层次结构 (2. ...

  8. Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）

    Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...

  9. php商城项目视频,thinkphp5.0商城项目实战视频教程

    Thinkphp作为开源的PHP框架发展到今天,无疑是国内最适合PHP学员学习和使用的框架,除了简单容易上手,更大的优点是开发文档完善.插件丰富.满足作为开发大中型网站框架的条件,此课程将以开发一个中 ...

最新文章

  1. [安全防护]StackGuard和StackShield
  2. Kubernetes的初始化容器initContainers
  3. [BSidesSF2019]slashslash
  4. 使用 SAP WebIDE 创建 SAP Fiori Elements 应用
  5. 2020 q5l使用手册电子版_关于2020下半年自考本科毕业生论文预答辩题目查询的通知...
  6. 跌倒识别 摔倒识别 -lightweight_openpose
  7. JSP解决 — 登录注册界面点击按钮无法获取值在界面显示
  8. JS对象编程的原型和构造函数混合使用
  9. kubernetes视频教程笔记 （4）-服务发现-service和pod组建
  10. 手把手教你学项目管理软件project
  11. Word2013自动生成中英文目录
  12. 零基础学习IT技术是有技巧的
  13. 商业智能BI与业务管理决策思维之二：业务结构分析
  14. 【C】有一个已排好序的数组，要求输入一个数后，按原来排序的规律将它插入数组中
  15. 谷歌浏览器注入的样式表 （更改了我网页的样式）
  16. 怎样才能在网上卖东西，手把手教你闲鱼卖货！
  17. np.array数组的切片
  18. 加密与解密 、 AIDE入侵检测系统 、 扫描与抓包案例
  19. 数据结构与算法 — 约瑟夫问题(Josephu)
  20. Python基础-16 函数高级（续）

热门文章

  1. 我与我的专业计算机网络作文,我与网络的作文
  2. lab1 partⅣ
  3. 京东夺宝岛抢拍插件（转）
  4. linux查找命令which、whereis、find比较解析
  5. 用find在html中找字符串,Windows CMD中 find命令（字符串查找）
  6. tensorflow1.0 windows下安装
  7. micro、M3O微服务系列(三)
  8. 2的0次方为什么等于1？
  9. 【来日复制粘贴】状态栏随机显示
  10. win10怎么还原系统【系统天地】