html css javascript中带有文本的自动图像滑块

📌 相关文章

📜 html css javascript中带有文本的自动图像滑块 - Html(1)

📅 最后修改于: 2023-12-03 15:01:09.822000 🧑 作者: Mango

这是一款使用HTML、CSS、JavaScript开发的图像滑块，能够自动播放，适用于展示图片和文字介绍等场景。使用这款图像滑块能够为网站增加一些动感和视觉效果，提高用户体验。

代码示例

以下是基于HTML、CSS、JavaScript实现的图像滑块代码示例。本示例使用了Bootstrap框架的样式，图片与文字描述内容可以根据需要自行更改。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自动图像滑块</title>
  <!-- 引入Bootstrap文件 -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
  <style>
    /* 控制图片容器的大小，以及设置背景颜色等样式 */
    .slide {
      width: 100%;
      height: 300px;
      background-color: #f8f9fa;
    }

    /* 控制图片大小，以及居中显示 */
    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      text-align: center;
      display: flex;
    }

    /* 控制文字容器的样式 */
    .slide-content {
      width: 60%;
      margin: 0 auto;
      margin-top: -150px; /* 让文字垂直居中显示 */
      text-align: center;
      padding: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      position: relative;
      bottom: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <!-- 图片1 -->
        <div class="carousel-item active">
          <div class="slide">
            <img src="https://picsum.photos/id/1000/600/300" alt="First slide">
            <div class="slide-content">
              <h3>图片标题1</h3>
              <p>图片描述1</p>
            </div>
          </div>
        </div>
        <!-- 图片2 -->
        <div class="carousel-item">
          <div class="slide">
            <img src="https://picsum.photos/id/1001/600/300" alt="Second slide">
            <div class="slide-content">
              <h3>图片标题2</h3>
              <p>图片描述2</p>
            </div>
          </div>
        </div>
        <!-- 图片3 -->
        <div class="carousel-item">
          <div class="slide">
            <img src="https://picsum.photos/id/1003/600/300" alt="Third slide">
            <div class="slide-content">
              <h3>图片标题3</h3>
              <p>图片描述3</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入Bootstrap文件，用于实现图像滑块的轮播效果 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>

  <script>
    // 获取元素
    var slides = document.querySelectorAll('.slide');

    // 遍历每个图片容器
    slides.forEach(function(slide) {
      // 获取图片的高度
      var height = slide.clientHeight;

      // 添加样式，让文字容器的高度为图片高度的一半
      slide.querySelector('.slide-content').style.height = height / 2 + 'px';
    });

    // 自动播放图片
    $('.carousel').carousel({
      interval: 3000 // 切换图片时间间隔
    });
  </script>
</body>

</html>

代码解析

代码中主要用到了HTML、CSS和JavaScript三个方面的知识，下面我们来详细解析一下：

HTML

<div class="slide">
  <img src="https://picsum.photos/id/1000/600/300" alt="First slide">
  <div class="slide-content">
    <h3>图片标题1</h3>
    <p>图片描述1</p>
  </div>
</div>

这个代码块代表了一个包含图片和文字的滑块，主要包含以下几个部分：

.slide：图片容器，用于存放图片和文字；
img：图片元素，用于展示图片；
.slide-content：文字容器，用于展示标题和描述。

这个代码块需要多次重复添加到页面中，用于展示多个滑块。

CSS

.slide {
  width: 100%;
  height: 300px;
  background-color: #f8f9fa;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  text-align: center;
  display: flex;
}

.slide-content {
  width: 60%;
  margin: 0 auto;
  margin-top: -150px;
  text-align: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  position: relative;
  bottom: 0;
}

这个代码块主要用于控制滑块的样式，包括图片大小、容器大小、文字容器样式等。值得注意的是，这个示例中为文字容器设置了position: relative; bottom: 0;的样式，让文字容器出现时会从图片底部往上移动。

JavaScript

// 获取元素
var slides = document.querySelectorAll('.slide');

// 遍历每个图片容器
slides.forEach(function(slide) {
  // 获取图片的高度
  var height = slide.clientHeight;

  // 添加样式，让文字容器的高度为图片高度的一半
  slide.querySelector('.slide-content').style.height = height / 2 + 'px';
});

// 自动播放图片
$('.carousel').carousel({
  interval: 3000 // 切换图片时间间隔
});

这个代码块主要用于自动播放图片和设置文字容器的样式。在自动播放图片方面，使用了Bootstrap框架提供的carousel组件，每隔三秒自动切换图片；而在设置文字容器样式方面，通过JavaScript获取每个图片容器的高度并设置文字容器的高度为其一半。