HTML、CSS、jQuery: 画像のスクロール表示を実装するための技術ガイド

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slide">
      <img src="image1.jpg" alt="Image 1">
    </li>
    <li class="slide">
      <img src="image2.jpg" alt="Image 2">
    </li>
    <li class="slide">
      <img src="image3.jpg" alt="Image 3">
    </li>
  </ul>
</div>

.slider {
  width: 500px; /* 设置图片展示区域的宽度 */
  height: 300px; /* 设置图片展示区域的高度 */
  overflow: hidden; /* 隐藏超出尺寸的图片 */
  position: relative; /* 设置相对定位 */
}

.slider-wrapper {
  width: 100%; /* 设置图片列表的宽度 */
  height: 100%; /* 设置图片列表的高度 */
  display: flex; /* 使用flex布局 */
  transition: transform 0.5s ease; /* 设置滚动效果的过渡动画 */
}

.slide {
  width: 100%; /* 设置每个列表项的宽度 */
  height: 100%; /* 设置每个列表项的高度 */
  flex-shrink: 0; /* 防止图片缩小 */
}

.slide img {
  width: 100%; /* 设置图片的宽度 */
  height: 100%; /* 设置图片的高度 */
}

$(document).ready(function() {
  var sliderWrapper = $('.slider-wrapper');
  var slides = $('.slide');
  var slideWidth = slides.first().outerWidth(); // 获取每个图片列表项的宽度

  // 设置图片列表的总宽度
  sliderWrapper.css('width', slideWidth * slides.length);

  function slide() {
    // 获取当前图片列表的左偏移量
    var currentLeft = sliderWrapper.position().left;

    // 判断是否到达最后一张图片，如果是则滚动到第一张图片
    if (currentLeft <= -(slideWidth * (slides.length - 1))) {
      sliderWrapper.css('left', 0);
    } else {
      // 执行滚动动画
      sliderWrapper.animate({ 'left': currentLeft - slideWidth }, 500);
    }

    // 设置定时器，自动滚动图片
    setTimeout(slide, 3000);
  }

  // 启动自动滚动
  setTimeout(slide, 3000);
});