如何用HTML、CSS和JavaScript实现支持触控且自动播放的轮播图

我正在构建一个由单选按钮控制、通过JavaScript操作data属性触发的轮播图。经过多次尝试和迭代，在他人帮助下完成修改，现已可正常运行。以下是更新后的实现代码，恳请提出优化建议以提升其性能与完善度。

<div id="carouselWrapper">
  <div id="carousel-controls">
    <span class="control-icon" id="prev">⇦</span>
    <span class="control-icon" id="next">⇨</span>
  </div>

  <div class="carouselList">
    <div class="carouselListItem first">
      <img src="https://placehold.co/100x100/000000/FFFFFF/png" alt="">
    </div>
    <div class="carouselListItem second">
      <img src="https://placehold.co/100x100/000000/FFFFFF/png" alt="">
    </div>
    <div class="carouselListItem third">
      <img src="https://placehold.co/100x100/000000/FFFFFF/png" alt="">
    </div>
    <div class="carouselListItem fourth">
      <img src="https://placehold.co/100x100/000000/FFFFFF/png" alt="">
    </div>
    <div class="carouselListItem fifth">
      <img src="https://placehold.co/100x100/000000/FFFFFF/png" alt="">
    </div>
  </div>

  <div class="navigation-container">
    <div class="radios">
      <input id="radio1" class="radTrigger" type="radio" name="radio-btn" data-index="0" value="radio1">
      <label for="radio1" class="radio-btn"></label>
      <input id="radio2" class="radTrigger" type="radio" name="radio-btn" data-index="1">
      <label for="radio2" class="radio-btn"></label>
      <input id="radio3" class="radTrigger" type="radio" name="radio-btn" data-index="2">
      <label for="radio3" class="radio-btn"></label>
      <input id="radio4" class="radTrigger" type="radio" name="radio-btn" data-index="3">
      <label for="radio4" class="radio-btn"></label>
      <input id="radio5" class="radTrigger" type="radio" name="radio-btn" data-index="4">
      <label for="radio5" class="radio-btn"></label>
    </div>
  </div>
</div>

<script>
  window.onload = function carousel() {
    const allRads = document.querySelectorAll(".radios > input[type='radio']");
    const allImages = document.querySelectorAll(".carouselListItem");
    document.querySelector('input[value="radio1"]').checked = true;

    document.querySelector(".radios").addEventListener("click", function(event) {
      if (event.target.classList.contains("radTrigger")) {
        allImages.forEach(function(item) {
          item.classList.remove("activeListItem");
        });
        allRads.forEach(function(item) {
          item.classList.remove("activeRadio");
        });
        allImages[Array.from(allRads).indexOf(event.target)].classList.add("activeListItem");
      }
    });
  }

  let currentIndex = 0;
  const images = document.querySelectorAll('.carouselListItem');
  const radios = document.querySelectorAll('input[name="radio-btn"]');

  function updateCarousel(index) {
    images.forEach((image, i) => {
      if (i === index) {
        image.style.display = 'block';
        radios[i].checked = true;
      } else {
        image.style.display = 'none';
        radios[i].checked = false;
      }
    });
  }

  function cycleCarousel() {
    currentIndex = (currentIndex + 1) % images.length;
    updateCarousel(currentIndex);
    setTimeout(cycleCarousel, 4000);
  }

  radios.forEach(radio => {
    radio.addEventListener('click', () => {
      const selectedIndex = parseInt(radio.getAttribute('data-index'));
      currentIndex = selectedIndex;
      updateCarousel(selectedIndex);
    });
  });

  const prevButton = document.getElementById('prev');
  const nextButton = document.getElementById('next');

  prevButton.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    updateCarousel(currentIndex);
  });

  nextButton.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    updateCarousel(currentIndex);
  });

  const carouselContainer = document.getElementById('carouselWrapper');
  let touchStartX = 0;
  let touchDeltaX = 0;

  carouselContainer.addEventListener('touchstart', e => {
    touchStartX = e.touches[0].clientX;
    touchDeltaX = 0;
  });

  carouselContainer.addEventListener('touchmove', e => {
    touchDeltaX = e.touches[0].clientX - touchStartX;
  });

  carouselContainer.addEventListener('touchend', () => {
    const threshold = 50;
    if (touchDeltaX > threshold) {
      currentIndex = (currentIndex - 1 + radios.length) % radios.length;
      updateCarousel(currentIndex);
    } else if (touchDeltaX < -threshold) {
      currentIndex = (currentIndex + 1) % radios.length;
      updateCarousel(currentIndex);
    }
  });

  window.addEventListener('load', () => {
    updateCarousel(currentIndex);
    setTimeout(cycleCarousel, 6000);
  });
</script>

具体优化方向： #

• 合并重复逻辑与DOM查询：现在代码里多次查询相同DOM元素，还重复绑定了window.load事件，建议把所有初始化逻辑放到同一个加载回调里，只查询一次DOM元素，减少性能消耗。
• 优化updateCarousel函数：不用每次遍历所有元素，只需要隐藏上一个活跃项、显示当前项即可；用CSS类控制显示隐藏，代替直接操作style.display，更易维护。
• 统一单选按钮事件处理：目前有两处单选按钮的事件监听，逻辑重复，保留事件委托的方式就行，减少事件绑定数量。
• 自动轮播的交互优化：用户手动切换（点击按钮、单选框、滑动）时，暂停自动轮播，一段时间无操作后再重启，避免干扰用户操作。
• 语义化与可访问性提升：控制按钮改用<button>标签（默认支持键盘交互），给图片添加有意义的alt文本，给单选框标签加ARIA属性。
• 避免全局变量污染：把所有轮播逻辑封装到立即执行函数里，防止变量泄露到全局作用域。

内容的提问来源于stack exchange，提问作者Chi