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

最新推荐文章于 2024-08-01 11:06:07 发布

置顶 Y_qilin_

最新推荐文章于 2024-08-01 11:06:07 发布

阅读量5.2k

点赞数 13

分类专栏： JQuery 文章标签： jquery javascript css html

本文链接：https://blog.csdn.net/Y_qilin_/article/details/109635695

版权

JQuery 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

JQuery极果商城前端页面

效果图
技术点
HTML页面结构
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"}
    ]
]