如果想要制作图片是每次都有三张呈现，但是图片会向左轮播，也就是原本在1位置（最左侧）的图片会隐藏，在2位置（中间）的图片会到1位置，3位置的图片到2位置，原本隐藏的4图片出现在3位置，同时每张图片都会有对应的描述文字的轮播图

这种效果通常被称为“三图轮播”或“无缝滚动”，在前端开发中常用JavaScript库如Swiper、Slick.js或者纯CSS通过`carousel`组件来实现。以下是基本步骤：

1. **HTML结构**：
- 创建三个`<div>`元素，每个代表一张图片，加上对应编号和描述文本。

   <div class="carousel">
     <div class="slide" data-index="1">图片1<br>描述1</div>
     <div class="slide" data-index="2">图片2<br>描述2</div>
     <div class="slide" data-index="3">图片3<br>描述3</div>
     <!-- 可能还需要一个隐藏的第四个元素 -->
     <div class="slide hidden" data-index="4">图片4<br>描述4</div>
   </div>

2. **CSS样式**：
- 配置轮播的基本样式，比如设置宽度、高度和动画延迟等。

   .carousel {
     width: 300px;
     height: 200px;
     overflow: hidden;
   }
   .slide {
     position: absolute;
     opacity: 0;
     transition: opacity 0.5s ease-in-out;
   }
   .active {
     opacity: 1;
   }

3. **JavaScript/jQuery** 或其他库：
- 使用轮播库的API，监听滑动事件，更新 `.active` 类，切换隐藏显示状态。

   $(function() {
     var slides = $('.slide');
     function switchSlide(index) {
       slides.eq(index).addClass('active').siblings().removeClass('active');
       // 如果当前索引为最后一个，将第一张设为隐藏并切换到第一张
       if (index === slides.length - 1) {
         slides.first().addClass('hidden').next().removeClass('hidden');
       } else if (index === 0) {
         slides.last().addClass('hidden').prev().removeClass('hidden');
       }
     }
     // 初始化显示第一张
     switchSlide(0);
     // 添加滑动事件监听
     slides.on('click', function(e) {
       e.preventDefault();
       switchSlide($(this).data('index'));
     });
   });