基于jQuery+bootstrap实现幻灯片垂

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 08:07:36

基于jQuery+Bootstrap实现幻灯片垂直切换效果

理解需求

基于jQuery和Bootstrap，实现幻灯片垂直切换的效果，即多张图片上下滑动切换。

实现思路

HTML结构:
- 使用Bootstrap的栅格系统创建幻灯片容器。
- 每个幻灯片图片放置在一个div中，并设置好类名。
CSS样式:
- 使用CSS设置幻灯片容器的高度和宽度。
- 使用CSS的transition属性为图片设置过渡效果。
- 使用position属性对图片进行绝对定位，以便进行上下移动。
jQuery交互:
- 点击按钮或设置定时器，触发幻灯片切换。
- 使用jQuery的animate方法来控制图片的上下移动。

代码示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>垂直幻灯片</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
  <style>
    .carousel-inne   r {
      height: 500px;
      position: relative;
    }
    .carousel-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: transform 0.5s ease-in-out;
    }
    .active {
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="image1.jpg" alt="Image 1">
      </div>
      <div class="carousel-item">
        <img src="image2.jpg" alt="Image 2">
      </div   >
      </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      let currentIndex = 0;
      const item   s = $('.carousel-item');
      const itemCount = items.length;

      function nextSlide() {
        currentIndex = (currentIndex + 1) % itemCount;
        items.removeClass('active');
        items.eq(currentIndex).addClass('active');
        items.eq(currentIndex).css('transform', 'translateY(-100%)');
        setTimeout(() => {
          items.eq(currentIndex).css('transform', 'translateY(0)');
        }, 10);
      }

      // 定时器示例
      setInterval(nextSlide, 3000);
    });
  </script>
</body>
</html>

代码解释

HTML结构: 使用Bootstrap的容器类，并为每个幻灯片图片设置carousel-item类。
CSS样式: 设置幻灯片容器的高度，并为.carousel-item设置绝对定位和过渡效果。
jQuery交互:
- currentIndex 记录当前显示的图片索引。
- nextSlide 函数实现幻灯片切换逻辑：
  - 修改当前索引。
  - 移除所有图片的active类，添加给新的当前图片。
  - 将新的当前图片向上移动100%，然后立即重置为0，实现平滑过渡。