Widget:点击切换图片

   <style>
       /* 初始时，除了每个 div 里的第一张图片，其余图片都隐藏 */
       .image-container img {
           display: none;
           cursor: pointer;
       }

       .image-container img:first-of-type {
           display: block;
       }
   </style>

   <script>
       // 获取所有具有 image-container 类的 div
       const containers = document.querySelectorAll('.image-container');

       // 遍历每个容器
       containers.forEach((container) => {
           // 获取当前容器内的所有图片元素并转换为数组
           const images = Array.from(container.getElementsByTagName('img'));
           // 当前显示图片的索引，初始为 0
           let currentIndex = 0;

           // 定义切换图片的函数
           function showImage(index) {
               // 隐藏当前容器内的所有图片
               images.forEach(img => img.style.display = 'none');
               // 显示指定索引的图片
               images[index].style.display = 'block';
           }

           // 为当前容器内的每张图片添加点击事件监听器
           images.forEach((img, index) => {
               img.addEventListener('click', () => {
                   // 计算下一张要显示的图片的索引
                   currentIndex = (index + 1) % images.length;
                   // 调用切换图片的函数
                   showImage(currentIndex);
               });
           });
       });
   </script>