纯html实现商品首页

效果图片
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>京东H5商城</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f5f5f5; color: #333; }
        .header { background: #e4393c; color: white; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; top: 0; z-index: 100; }
        .search-bar { background: rgba(255,255,255,0.9); border-radius: 15px; padding: 5px 10px; margin: 10px 15px; display: flex; align-items: center; }
        .search-input { border: none; background: transparent; width: 100%; outline: none; }
        .banner-container { width: 100%; height: 150px; margin-top: 60px; overflow: hidden; position: relative; }
        .banner-wrapper { display: flex; transition: transform 0.5s ease; height: 100%; }
        .banner-slide { flex: 0 0 100%; height: 100%; }
        .banner-slide img { width: 100%; height: 100%; object-fit: cover; }
        .banner-pagination { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; }
        .banner-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); margin: 0 4px; }
        .banner-dot.active { background: white; }
        .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 15px; background: white; }
        .category-item { display: flex; flex-direction: column; align-items: center; }
        .category-icon { width: 40px; height: 40px; background: #f5f5f5; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; }
        .section-title { padding: 10px 15px; font-size: 16px; font-weight: bold; }
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 10px 60px; }
        .product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s; }
        .product-card:active { transform: scale(0.98); }
        .product-img { width: 100%; height: 160px; object-fit: cover; }
        .product-info { padding: 10px; }
        .product-title { font-size: 14px; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .product-price { color: #e4393c; font-weight: bold; font-size: 16px; }
        .product-original-price { color: #999; font-size: 12px; text-decoration: line-through; margin-left: 5px; }
        .product-sales { color: #999; font-size: 12px; margin-top: 5px; }
        .footer-nav { position: fixed; bottom: 0; width: 100%; background: white; display: flex; justify-content: space-around; padding: 8px 0; border-top: 1px solid #eee; }
        .nav-item { display: flex; flex-direction: column; align-items: center; }
        .nav-icon { font-size: 20px; margin-bottom: 2px; }
        .nav-text { font-size: 10px; }
        .active { color: #e4393c; }
    </style>
</head>
<body>
    <header class="header">
        <div class="logo">京东</div>
        <div class="search-bar">
            <input type="text" class="search-input" placeholder="搜索商品">
            <span>🔍</span>
        </div>
        <div class="user-icon">
            <span>👤</span>
        </div>
    </header>

    <div class="banner-container" id="banner-container">
        <div class="banner-wrapper" id="bannerWrapper"></div>
        <div class="banner-pagination" id="bannerPagination"></div>
    </div>

    <div class="category-grid">
        <div class="category-item">
            <div class="category-icon">📱</div>
            <span>手机</span>
        </div>
        <div class="category-item">
            <div class="category-icon">💻</div>
            <span>电脑</span>
        </div>
        <div class="category-item">
            <div class="category-icon">👕</div>
            <span>服装</span>
        </div>
        <div class="category-item">
            <div class="category-icon">🥩</div>
            <span>生鲜</span>
        </div>
        <div class="category-item">
            <div class="category-icon">🏠</div>
            <span>家居</span>
        </div>
    </div>

    <div class="section-title">热门推荐</div>
    <div class="product-grid" id="productContainer"></div>

    <nav class="footer-nav">
        <div class="nav-item active">
            <div class="nav-icon">🏠</div>
            <div class="nav-text">首页</div>
        </div>
        <div class="nav-item">
            <div class="nav-icon">📊</div>
            <div class="nav-text">分类</div>
        </div>
        <div class="nav-item">
            <div class="nav-icon">🛒</div>
            <div class="nav-text">购物车</div>
        </div>
        <div class="nav-item">
            <div class="nav-icon">👤</div>
            <div class="nav-text">我的</div>
        </div>
    </nav>

    <script>
        // JSON数据
        const appData = {
            banners: [
                { id: 1, img: "https://picsum.photos/600/300?random=1", link: "#" },
                { id: 2, img: "https://picsum.photos/600/300?random=2", link: "#" },
                { id: 3, img: "https://picsum.photos/600/300?random=3", link: "#" }
            ],
            products: [
                { id: 1, name: "iPhone 14 Pro Max 256GB", price: 8999, originalPrice: 9999, img: "https://picsum.photos/300/300?random=4", sales: 1520 },
                { id: 2, name: "小米13 Ultra 12+256GB", price: 5999, originalPrice: 6499, img: "https://picsum.photos/300/300?random=5", sales: 2530 },
                { id: 3, name: "华为Mate50 Pro 8+256GB", price: 6999, originalPrice: 7999, img: "https://picsum.photos/300/300?random=6", sales: 980 },
                { id: 4, name: "荣耀Magic5 Pro 12+256GB", price: 5199, originalPrice: 5699, img: "https://picsum.photos/300/300?random=7", sales: 560 },
                { id: 5, name: "OPPO Find X6 Pro 12+256GB", price: 5999, originalPrice: 6499, img: "https://picsum.photos/300/300?random=8", sales: 3200 },
                { id: 6, name: "vivo X90 Pro+ 12+256GB", price: 6499, originalPrice: 6999, img: "https://picsum.photos/300/300?random=9", sales: 1870 }
            ]
        };

        // 轮播图实现
        class BannerSlider {
            constructor(containerId, data, options = {}) {
                this.container = document.getElementById(containerId);
                this.wrapper = this.container.querySelector('.banner-wrapper');
                this.pagination = document.getElementById('bannerPagination');
                this.data = data;
                this.currentIndex = 0;
                this.interval = options.interval || 3000;
                this.timer = null;
                this.init();
            }
            
            init() {
                this.render();
                this.startAutoPlay();
                this.setupEventListeners();
            }
            
            render() {
                // 渲染轮播图内容
                this.wrapper.innerHTML = this.data.map(item => `
                    <div class="banner-slide">
                        <a href="${item.link}">
                            <img src="${item.img}" alt="轮播图${item.id}">
                        </a>
                    </div>
                `).join('');
                
                // 渲染指示器
                this.pagination.innerHTML = this.data.map((_, index) => `
                    <div class="banner-dot ${index === 0 ? 'active' : ''}" data-index="${index}"></div>
                `).join('');
                
                this.slides = this.wrapper.querySelectorAll('.banner-slide');
                this.dots = this.pagination.querySelectorAll('.banner-dot');
            }
            
            startAutoPlay() {
                this.timer = setInterval(() => {
                    this.next();
                }, this.interval);
            }
            
            next() {
                this.goToSlide((this.currentIndex + 1) % this.slides.length);
            }
            
            goToSlide(index) {
                this.slides[this.currentIndex].style.opacity = '0';
                this.dots[this.currentIndex].classList.remove('active');
                
                this.currentIndex = index;
                this.wrapper.style.transform = `translateX(-${this.currentIndex * 100}%)`;
                
                this.slides[this.currentIndex].style.opacity = '1';
                this.dots[this.currentIndex].classList.add('active');
            }
            
            setupEventListeners() {
                // 鼠标悬停暂停轮播
                this.container.addEventListener('mouseenter', () => clearInterval(this.timer));
                this.container.addEventListener('mouseleave', () => this.startAutoPlay());
                
                // 点击指示器切换
                this.dots.forEach(dot => {
                    dot.addEventListener('click', () => {
                        const index = parseInt(dot.dataset.index);
                        if (index !== this.currentIndex) {
                            clearInterval(this.timer);
                            this.goToSlide(index);
                            this.startAutoPlay();
                        }
                    });
                });
            }
        }

        // 渲染商品列表
        function renderProducts() {
            const container = document.getElementById('productContainer');
            container.innerHTML = appData.products.map(product => `
                <div class="product-card">
                    <img src="${product.img}" alt="${product.name}" class="product-img">
                    <div class="product-info">
                        <div class="product-title">${product.name}</div>
                        <div>
                            <span class="product-price">¥${product.price}</span>
                            <span class="product-original-price">¥${product.originalPrice}</span>
                        </div>
                        <div class="product-sales">已售${product.sales}件</div>
                    </div>
                </div>
            `).join('');
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            new BannerSlider('banner-container', appData.banners);
            renderProducts();
            
            // 底部导航点击效果
            const navItems = document.querySelectorAll('.footer-nav .nav-item');
            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    navItems.forEach(nav => nav.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>