jquery 图片集不间断滚动效果带箭头

原创

mob649e81576de1 2024-09-05 05:14:40 ©著作权

文章标签 jQuery 滚动效果网页设计 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e81576de1的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 图片集不间断滚动效果带箭头

在现代网页设计中，用户体验至关重要，而图像轮播是增强用户互动的一种有效方式。本文将介绍如何使用 jQuery 实现一个带有箭头的、不间断滚动的图片集效果。为了便于理解，我们将分步骤进行讲解，并提供必要的代码示例。

1. 准备工作

首先，你需要在项目中引入 jQuery 库。可以通过 CDN 来引用：

<script src="

接下来，准备一组图片素材，并且写好 HTML 结构。

HTML 结构

<div class="gallery-container">
  <div class="gallery">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
  </div>
  <div class="arrow left-arrow">&#10094;</div>
  <div class="arrow right-arrow">&#10095;</div>
</div>

这里的 .gallery-container 是整体容器，其中 .gallery 是每个图片的父容器。

2. CSS 样式

为了使我们的轮播看起来更美观，我们将应用一些基本的 CSS 样式。

.gallery-container {
  position: relative;
  width: 600px;
  overflow: hidden;
}

.gallery {
  display: flex;
  transition: transform 0.5s ease;
}

.gallery img {
  width: 600px;
  height: auto;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 30px;
  color: white;
}

.left-arrow {
  left: 10px;
}

.right-arrow {
  right: 10px;
}

引用形式的描述信息

上述 CSS 样式使图片水平排列，并通过 overflow 属性限定容器的可视区域。

3. jQuery 实现不间断滚动

接下来，我们用 jQuery 实现不间断滚动效果。该效果需要设置定时器定期更新图片位置，并控制箭头的显隐。

$(document).ready(function() {
  let currentIndex = 0;
  const totalImages = $('.gallery img').length;

  function showImage(index) {
    const offset = -index * 600; // 每张图片的宽度
    $('.gallery').css('transform', 'translateX(' + offset + 'px)');
  }

  function nextImage() {
    currentIndex = (currentIndex + 1) % totalImages;
    showImage(currentIndex);
  }

  function prevImage() {
    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
    showImage(currentIndex);
  }

  // 自动播放
  setInterval(nextImage, 3000);

  // 左右箭头控制
  $('.left-arrow').click(prevImage);
  $('.right-arrow').click(nextImage);
});

引用形式的描述信息

以上 jQuery 代码实现了图片的自动切换，每三秒切换一次，并通过箭头实现手动切换。

4. 流程图

为加深理解，我们用流程图描述一下这个过程：

flowchart TD
    A[用户查看图片] --> B{是否点击箭头?}
    B -- 是 --> C[执行切换图片]
    C --> D[更新当前图片索引]
    D --> E[显示新图片]
    B -- 否 --> F[检查自动切换时间]
    F -->|每3秒| G[自动切换图片]
    G --> D