写一个简单的静态html页面demo，包含幻灯片

news2025/1/13 15:53:52

效果图：
在这里插入图片描述
代码如下，图片文件可自行更换：

<!DOCTYPE html>
<html>
<head>
  <title>公司网站</title>
  <style>
    /* 样式定义 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    nav {
      background-color: #555;
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      margin-right: 10px;
    }

    .content {
      padding: 20px;
    }

    footer {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    /* 动态效果 */
    nav a:hover {
      color: #ff0000;
    }

    .slideshow {
      width: 60%;
      height: 300px;
      overflow: hidden;
      position: relative;
      margin: 0 auto; /* 剧中 */
    }

    .slide {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .slide.active {
      opacity: 1;
    }

  </style>
  <script>
     // 动态幻灯片
     document.addEventListener('DOMContentLoaded', function() {
      const slides = document.querySelectorAll('.slide');
      let currentSlideIndex = 0;

      function showNextSlide() {
        slides[currentSlideIndex].classList.remove('active');
        currentSlideIndex = (currentSlideIndex + 1) % slides.length;
        slides[currentSlideIndex].classList.add('active');
      }

      setInterval(showNextSlide, 3000);
    });
  </script>
</head>
<body>
  <header>
    <h1>公司名称</h1>
  </header>

  <nav>
    <a href="#">首页</a>
    <a href="#">关于我们</a>
    <a href="#">业务介绍</a>
    <a href="#">联系方式</a>
  </nav>
  
  <div class="slideshow">
    <img class="slide active" src="./image/image1.png" alt="Slide 1">
    <img class="slide" src="./image/image2.png" alt="Slide 2">
    <img class="slide" src="./image/image3.png" alt="Slide 3">
  </div>

  <div class="content">
    <h2>公司介绍</h2>
    <p>这里是公司介绍的内容。</p>

    <h2>主要业务介绍</h2>
    <p>这里是主要业务介绍的内容。</p>

    <h2>联系方式</h2>
    <p>这里是联系方式的内容。</p>
  </div>

 
  <footer>
    &copy; 2023 公司名称. All rights reserved.
  </footer>
</body>
</html>