效果
完整代码
HTML
<div class="top-nav"> <div class="nav"> <div class="nav-item active" data-index="0">全网热卖</div> <div class="nav-item" data-index="1">小米影像</div> <div class="nav-item" data-index="2">百度百科</div> <div class="nav-item" data-index="3">视频专区</div> <div class="nav-item" data-index="4">品牌图片</div> </div> <input type="text" class="search-box" placeholder="搜索商品"> </div> <div class="content-carousel"> <div class="carousel-inner"> <div class="carousel-item active" id="hot-sales"> <div class="product-grid"> <!-- 热卖产品将通过JavaScript动态生成 --> </div> </div> <div class="carousel-item" id="xiaomi-image"> <h2>小米影像</h2> <p>这里展示小米的影像技术和产品。</p> <img src="/api/placeholder/600/400" alt="小米影像技术展示"> </div> <div class="carousel-item" id="baidu-baike"> <h2>百度百科</h2> <p>这里可以放置小米相关的百度百科内容。</p> <div>小米是一家专注于智能硬件和电子产品研发的公司，成立于2010年...</div> </div> <div class="carousel-item" id="video-section"> <h2>视频专区</h2> <p>这里可以展示小米产品的视频介绍。</p> <div style="background-color: #ddd; width: 640px; height: 360px; margin: 20px auto; display: flex; justify-content: center; align-items: center;"> 视频播放器占位符 </div> </div> <div class="carousel-item" id="brand-images"> <h2>品牌图片</h2> <p>这里展示小米的品牌形象和产品图片。</p> <div style="display: flex; justify-content: space-around; flex-wrap: wrap;"> <img src="/api/placeholder/200/200" alt="小米Logo"> <img src="/api/placeholder/200/200" alt="小米产品展示1"> <img src="/api/placeholder/200/200" alt="小米产品展示2"> </div> </div> </div> </div>
css
<style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; } .top-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .nav { display: flex; } .nav-item { padding: 10px 15px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.3s ease; } .nav-item.active { border-bottom-color: #ff6700; color: #ff6700; } .search-box { padding: 5px; border: 1px solid #ddd; border-radius: 4px; } .content-carousel { position: relative; overflow: hidden; } .carousel-inner { display: flex; transition: transform 0.5s ease-in-out; } .carousel-item { min-width: 100%; display: none; } .carousel-item.active { display: block; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .product-card { background: white; border-radius: 8px; padding: 15px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s ease; } .product-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .product-card img { max-width: 100%; height: 150px; object-fit: contain; transition: transform 0.3s ease; } .product-card:hover img { transform: scale(1.05); } .product-name { margin: 10px 0; font-weight: bold; } .product-price { color: #ff6700; font-weight: bold; margin-bottom: 10px; } .buy-button { background-color: #ff6700; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .buy-button:hover { background-color: #ff8533; } </style>
Javascript
<script> // 产品数据 const products = [ { name: "Xiaomi MIX Fold 4", price: 8999, image: "./img/1.png" }, { name: "Xiaomi MIX Flip", price: 5999, image: "./img/1.png" }, { name: "Xiaomi Watch S4 Sport", price: 1999, image: "./img/1.png" }, { name: "小米手环9", price: 249, image: "./img/1.png" }, { name: "Xiaomi Buds 5", price: 699, image: "./img/1.png" }, { name: "小米创业思考", price: 86, image: "./img/1.png" }, { name: "Civi 4 Pro 迪士尼限定版", price: 3299, image: "./img/1.png" }, { name: "Xiaomi 14 Ultra", price: 6499, image: "./img/1.png" }, { name: "Xiaomi Pad 6S Pro 12.4", price: 3299, image: "./img/1.png" }, { name: "Redmi Turbo 3", price: 1999, image: "./img/1.png" }, ]; // 生成产品卡片 function generateProductCards() { const productGrid = document.querySelector('#hot-sales .product-grid'); productGrid.innerHTML = products.map(product => ` <div class="product-card"> <img src="${product.image}" alt="${product.name}"> <div class="product-name">${product.name}</div> <div class="product-price">¥${product.price}</div> <button class="buy-button">立即购买</button> </div> `).join(''); } // 初始化页面 generateProductCards(); // 导航和轮播功能 const navItems = document.querySelectorAll('.nav-item'); const carouselItems = document.querySelectorAll('.carousel-item'); const carousel = document.querySelector('.carousel-inner'); function showSlide(index) { navItems.forEach((item, i) => { item.classList.toggle('active', i === index); }); carouselItems.forEach((item, i) => { if (i === index) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } navItems.forEach((item, index) => { item.addEventListener('click', () => { showSlide(index); }); }); // 搜索功能（简单实现） const searchBox = document.querySelector('.search-box'); searchBox.addEventListener('input', (e) => { const searchTerm = e.target.value.toLowerCase(); const productCards = document.querySelectorAll('.product-card'); productCards.forEach(card => { const productName = card.querySelector('.product-name').textContent.toLowerCase(); card.style.display = productName.includes(searchTerm) ? 'block' : 'none'; }); }); </script>
