用HTML、CSS和jQuery来实现图片翻页的特效

2023-11-14 04:49:10

如何创建令人惊叹的图片轮播效果

1. HTML 结构

图片轮播的核心是一个容器，它包含要显示的图片。创建一个具有唯一 ID 的 <div> 元素作为容器。在容器中，添加代表每个图像的 <img> 元素。

2. CSS 样式

设置容器的宽度和高度以定义显示区域。将图片元素设置为绝对定位，并使用 top 和 left 属性控制其位置。为图片添加一个公共类，以便在 jQuery 中轻松管理它们的可见性。

3. jQuery 代码

使用 jQuery 变量 currentImageIndex 和 totalImages 来跟踪当前显示的图片索引和图片总数。使用 addClass 和 removeClass 方法切换名为 "active" 的类，以控制图片的显示和隐藏。在容器上绑定一个单击事件，以触发图像轮播效果。

示例代码

<div id="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

#image-container {
  width: 500px;
  height: 300px;
  position: relative;
}

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#image-container img.active {
  display: block;
}

#image-container img:not(.active) {
  display: none;
}

$(document).ready(function() {
  var currentImageIndex = 0;
  var totalImages = $('#image-container img').length;

  $('#image-container').on('click', function() {
    currentImageIndex++;
    if (currentImageIndex >= totalImages) {
      currentImageIndex = 0;
    }
    $('#image-container img').removeClass('active');
    $('#image-container img').eq(currentImageIndex).addClass('active');
  });
});