全屏自适应带标题的js幻灯片

以下是关于全屏自适应带标题的 JavaScript 幻灯片的相关内容：

基础概念：

JavaScript 幻灯片通常是通过定时切换图片或内容来展示一系列的信息。
全屏意味着幻灯片占据整个浏览器窗口。
自适应是指幻灯片能够根据不同的屏幕尺寸和分辨率自动调整布局和大小。

优势：

吸引用户注意力，有效地展示重要信息。
提供直观的视觉体验，增强页面的吸引力。
可以灵活控制展示的内容和顺序。

类型：

图片幻灯片：仅展示图片。
内容幻灯片：包含文字、图片等多种元素。

应用场景：

网站首页的焦点图展示。
产品介绍页面的图片轮播。
活动宣传页面的重点内容呈现。

可能遇到的问题及解决方法：

布局错乱：
- 原因：未充分考虑不同屏幕尺寸下的样式调整。
- 解决方法：使用 CSS 媒体查询来针对不同屏幕尺寸设置不同的样式规则。

图片加载缓慢：
- 原因：图片文件过大或网络不佳。
- 解决方法：优化图片大小和质量，使用适当的图片格式。
自动切换不流畅：
- 原因：JavaScript 定时器设置不合理或代码执行效率低。
- 解决方法：合理设置定时器时间间隔，优化 JavaScript 代码逻辑。

以下是一个简单的全屏自适应带标题的 JavaScript 幻灯片示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>幻灯片示例</title>
  <style>
    .slideshow-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    .slide {
      display: none;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .slide-title {
      position: absolute;
      bottom: 20px;
      left: 20px;
      color: white;
      font-size: 24px;
    }
  </style>
</head>

<body>

  <div class="slideshow-container">
    <div class="slide" style="background-image: url('image1.jpg');">
      <div class="slide-title">标题 1</div>
    </div>
    <div class="slide" style="background-image: url('image2.jpg');">
      <div class="slide-title">标题 2</div>
    </div>
    <div class="slide" style="background-image: url('image3.jpg');">
      <div class="slide-title">标题 3</div>
    </div>
  </div>

  <script>
    let slideIndex = 0;
    showSlides();

    function showSlides() {
      let slides = document.getElementsByClassName('slide');
      for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
      }
      slideIndex++;
      if (slideIndex > slides.length) {
        slideIndex = 1;
      }
      slides[slideIndex - 1].style.display = 'block';
      setTimeout(showSlides, 3000);
    }
  </script>

</body>

</html>

在上述示例中，通过 CSS 实现了全屏和自适应布局，JavaScript 控制幻灯片的自动切换和显示标题。