效果
完整代码
HTML部分
<header class="header"> <h1>创新科技有限公司</h1> </header> <div class="slider"> <div class="slide active" style="background-color: var(--primary-color);">创新科技，引领未来</div> <div class="slide" style="background-color: var(--secondary-color);">智能解决方案，全球领先</div> <div class="slide" style="background-color: #e74c3c;">携手共创，共赢发展</div> <button class="slider-btn prev"><</button> <button class="slider-btn next">></button> <div class="slider-nav"> <span class="slider-dot active"></span> <span class="slider-dot"></span> <span class="slider-dot"></span> </div> </div> <div class="container"> <div class="card-container"> <div class="card"> <div class="card-image" style="background-image: url('./img/2.png');"></div> <div class="card-content"> <h2 class="card-title">关于我们</h2> <p class="card-text">创新科技是一家致力于推动技术边界的全球领先企业。我们的使命是通过创新解决方案改变世界。</p> <a href="#" class="card-link">了解更多 →</a> </div> </div> <div class="card"> <div class="card-image" style="background-image: url('./img/1.png');"></div> <div class="card-content"> <h2 class="card-title">产品与服务</h2> <p class="card-text">探索我们广泛的产品线和服务，包括尖端软件解决方案、智能硬件和专业咨询服务。</p> <a href="#" class="card-link">查看产品 →</a> </div> </div> <div class="card"> <div class="card-image" style="background-image: url('./img/3.png');"></div> <div class="card-content"> <h2 class="card-title">最新动态</h2> <p class="card-text">了解公司最新发展、行业趋势和技术突破。与我们一起站在创新的前沿。</p> <a href="#" class="card-link">浏览新闻 →</a> </div> </div> <div class="card"> <div class="card-image" style="background-image: url('./img/4.png');"></div> <div class="card-content"> <h2 class="card-title">加入我们</h2> <p class="card-text">我们正在寻找充满激情的人才加入我们的创新团队。探索激动人心的职业机会和成长空间。</p> <a href="#" class="card-link">查看职位 →</a> </div> </div> </div> </div>
CSS部分
:root { --primary-color: #3498db; --secondary-color: #2ecc71; --text-color: #34495e; --bg-color: #ecf0f1; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); } .header { background-color: #34495e; color: white; padding: 15px 0; h1{ max-width: 1200px; margin: 0 auto; text-align: left; } } .slider { width: 100%; height: 400px; position: relative; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; display: flex; align-items: center; justify-content: center; font-size: 3em; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .slide.active { opacity: 1; } .slider-nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .slider-dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255,255,255,0.5); margin: 0 5px; cursor: pointer; } .slider-dot.active { background-color: white; } .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255,255,255,0.3); color: white; border: none; font-size: 2em; padding: 10px 15px; cursor: pointer; transition: background-color 0.3s; } .slider-btn:hover { background-color: rgba(255,255,255,0.5); } .slider-btn.prev { left: 10px; } .slider-btn.next { right: 10px; } .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; } .card { background-color: white; border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); overflow: hidden; transition: all 0.3s ease; } .card:hover { transform: translateY(-10px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); } .card-image { height: 200px; background-color: #e0e0e0; background-size: cover; background-position: center; } .card-content { padding: 20px; } .card-title { font-size: 22px; font-weight: bold; margin-bottom: 10px; color: var(--primary-color); } .card-text { font-size: 16px; line-height: 1.6; color: var(--text-color); } .card-link { display: inline-block; margin-top: 15px; color: var(--secondary-color); text-decoration: none; font-weight: bold; transition: color 0.3s ease; } .card-link:hover { color: var(--primary-color); }
Js部分
const slides = document.querySelectorAll('.slide'); const dots = document.querySelectorAll('.slider-dot'); const prevBtn = document.querySelector('.slider-btn.prev'); const nextBtn = document.querySelector('.slider-btn.next'); let currentSlide = 0; function showSlide(n) { slides[currentSlide].classList.remove('active'); dots[currentSlide].classList.remove('active'); currentSlide = (n + slides.length) % slides.length; slides[currentSlide].classList.add('active'); dots[currentSlide].classList.add('active'); } function nextSlide() { showSlide(currentSlide + 1); } function prevSlide() { showSlide(currentSlide - 1); } prevBtn.addEventListener('click', prevSlide); nextBtn.addEventListener('click', nextSlide); dots.forEach((dot, index) => { dot.addEventListener('click', () => showSlide(index)); }); setInterval(nextSlide, 5000); // 每5秒自动切换一次幻灯片
