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

这篇具有很好参考价值的文章主要介绍了写一个简单的静态html页面demo,包含幻灯片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:
写一个简单的静态html页面demo,包含幻灯片
代码如下,图片文件可自行更换:文章来源地址https://www.toymoban.com/news/detail-504054.html

<!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>

到了这里,关于写一个简单的静态html页面demo,包含幻灯片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端js--旋转幻灯片

    2024年02月14日
    浏览(41)
  • 去除PPT幻灯片编辑密码

    在线解密、找回和去除PPT幻灯片密码,使用百度搜索密码帝官网轻松搞定! 近来,你是否因为忘记了PPT幻灯片的密码而束手无策?或者遇到了PPT幻灯片被他人设定了密码无法编辑的困扰?别担心!为你提供了最简单、安全、实惠的解决办法!只需按照以下步骤操作,即可轻松

    2024年02月12日
    浏览(50)
  • 苹果cms添加幻灯片的操作方法

    苹果cms幻灯片是要靠推荐菜能调用后台的标签的。那么今天大家就随着我来看看幻灯片标签是如何调用的。 首先打开苹果cms后台。 然后点击视频管理。 然后就会显示出来你所添加进来的视频有哪些。 这个时候点击你想要加幻灯片的视频后面的修改。 然后选择一张大的图片

    2024年02月03日
    浏览(51)
  • 使用HTML+CSS写一个静态页面

    刚开始学习前端,在仅使用HTML和CSS的情况下,也可以写出一个页面,使用HTML对页面的内容进行架构,再此基础上使用CSS对内容进行美化。其中涉及了许多HTML和CSS的知识点,定位 浮动 链接 等,修改字体、图片大小、背景颜色、鼠标样式、鼠标与页面的交互、行内元素与块元

    2024年02月11日
    浏览(53)
  • 20230627通过WPS给PPT幻灯片加入页码

    20230627通过WPS给PPT幻灯片加入页码 2023/6/27 23:16 缘起:不想每次都手工给打印的PPT加页码,就通过百度搜索来自动加页码了! 真是偷懒让人进步呀! 百度搜索:ppt加页码怎么设置             方法步骤.png ?点击「插入」选项卡「幻灯片编号」功能按钮,勾选「幻灯片编号」,

    2024年02月11日
    浏览(41)
  • Python操作PPT:轻松创建、编辑和展示幻灯片

    引言: 在现代办公环境中,演示文稿已经成为一种常见的沟通工具。然而,使用传统的PowerPoint软件创建和编辑幻灯片可能会耗费大量的时间和精力。幸运的是,Python作为一种功能强大的编程语言,提供了许多库和工具,可以帮助我们更高效地操作PPT文件。本文将介绍如何使

    2024年01月21日
    浏览(41)
  • 速下载 | 200页幻灯片图解新版《商用密码管理条例》

    国家高度重视商用密码工作。 2023年4月14日,国务院常务会议审议通过了《商用密码条例》(以下简称《条例》)修订草案。5月24日中华人民共和国中央人民政府网站正式公开修订后的正式稿全文。 本次《条例》在密码法框架下进行了全面修订,修订后的《条例》不仅与密码

    2024年02月08日
    浏览(98)
  • WPS Office AI实战:一键生成PPT幻灯片

    前些天WPS Office AI放出来内测申请,相信不少小伙伴都拿到了体验资格,不知道体验到国产AI的魅力没有?作为写作中的重头戏,一张PPT的制作让不少小伙伴面露难色,单排版布局这一项就足以让人望而却步。  AI 在写作中的应用,大大减轻了大家这方面的痛苦,节省出很多时

    2024年02月12日
    浏览(48)
  • PPT插件-大珩助手-《提取选中的幻灯片》-选中新建

    提取选中的幻灯片到新的幻灯文稿中。PDF编辑器可以提取指定的页面到新的PDF文档中,PPT没有这个功能,因此开发。 PPT大珩助手是一款全新设计的Office PPT插件,它是一款功能强大且实用的PPT辅助工具,支持Wps Word和Office Word,能够轻松帮助您修改、优化和管理幻灯片。凭借丰

    2024年02月02日
    浏览(59)
  • 域环境下通过域策略推送图片(幻灯片)类型的屏保

                     公司想要推送安全宣传图片到员工电脑,本来想制作成scr屏保程序推送,但测试发现制作的屏保程序如果想放进屏保的默认路径C:WindowsSystem32,需要权限,而客户端只有User权限,无法放入。如果放在共享或者本地其他路径下,则会被安全防护软件拦

    2024年02月12日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包