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

效果图:
写一个简单的静态html页面demo,包含幻灯片_第1张图片
代码如下,图片文件可自行更换:

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>
    © 2023 公司名称. All rights reserved.
  footer>
body>
html>

你可能感兴趣的:(html,前端)