jquery横向时间轴记录册图片切换效果

以下是一个简单的jQuery横向时间轴记录册图片切换效果的代码示例：

HTML代码：

<div class="timeline">
  <div class="timeline-item active">
    <img src="image1.jpg" alt="Image 1">
    <div class="timeline-caption">
      <h3>Event 1</h3>
      <p>Description of event 1</p>
    </div>
  </div>
  <div class="timeline-item">
    <img src="image2.jpg" alt="Image 2">
    <div class="timeline-caption">
      <h3>Event 2</h3>
      <p>Description of event 2</p>
    </div>
  </div>
  <div class="timeline-item">
    <img src="image3.jpg" alt="Image 3">
    <div class="timeline-caption">
      <h3>Event 3</h3>
      <p>Description of event 3</p>
    </div>
  </div>
  <div class="timeline-item">
    <img src="image4.jpg" alt="Image 4">
    <div class="timeline-caption">
      <h3>Event 4</h3>
      <p>Description of event 4</p>
    </div>
  </div>
</div>

CSS代码：

.timeline {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}
.timeline-item {
  width: 25%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease;
}
.timeline-item.active {
  transform: translateX(0%);
}
.timeline-item.next {
  transform: translateX(100%);
}
.timeline-item.prev {
  transform: translateX(-100%);
}
.timeline-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.timeline-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px;
  color: #fff;
}
.timeline-caption h3 {
  margin: 0;
  font-size: 1.5em;
}
.timeline-caption p {
  margin: 0;
  font-size: 1em;
  opacity: 0.8;
}

jQuery代码：

$(function() {
  var timelineItems = $('.timeline-item');
  var currentIndex = 0;
  var maxIndex = timelineItems.length - 1;
  timelineItems.each(function(index) {
    $(this).addClass('position-' + index);
  });

  function updateTimeline() {
    timelineItems.removeClass('active next prev');
    timelineItems.eq(currentIndex).addClass('active');
    if (currentIndex < maxIndex) {
      timelineItems.eq(currentIndex + 1).addClass('next');
    } else {
      timelineItems.eq(0).addClass('next');
    }
    if (currentIndex > 0) {
      timelineItems.eq(currentIndex - 1).addClass('prev');
    } else {
      timelineItems.eq(maxIndex).addClass('prev');
    }
  }

  $('.timeline').swipe({
    swipeLeft: function() {
      currentIndex = currentIndex < maxIndex ? currentIndex + 1 : 0;
      updateTimeline();
    },
    swipeRight: function() {
      currentIndex = currentIndex > 0 ? currentIndex - 1 : maxIndex;
      updateTimeline();
    }
  });

  updateTimeline();
});

这段代码实现了一个横向的时间轴记录册，用户可以通过滑动手势来切换图片和相关的事件描述。每个时间轴项目都有一个图像和一个标题描述。CSS样式用于对时间轴进行布局和样式化，而jQuery代码用于添加交互行为。在jQuery代码中，我们使用swipe插件来实现滑动手势，同时我们还定义了一个updateTimeline函数来更新当前显示的时间轴项目。