htnl5 首尾相连的轮播图

HTML5中实现首尾相连的轮播图可以通过CSS的transform属性和JavaScript来实现。以下是一个简单的示例：

HTML代码：

<div class="carousel">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS代码：

.carousel {
  width: 300px; /* 设置轮播图容器宽度 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  white-space: nowrap; /* 强制内容在一行显示 */
}

.carousel img {
  display: inline-block; /* 图片水平排列 */
  width: 100%; /* 图片宽度填充容器 */
}

.carousel.active {
  animation: scroll-carousel 10s infinite linear; /* 应用动画效果，设置动画时长为10秒，无限循环 */
}

@keyframes scroll-carousel {
  0% {
    transform: translateX(0); /* 初始位置，不偏移 */
  }
  
  100% {
    transform: translateX(-100%); /* 移动到最左边，偏移一个容器宽度 */
  }
}

JavaScript代码：

var carousel = document.querySelector('.carousel');

function startCarousel() {
  carousel.classList.add('active'); // 添加active类开始轮播
}

function stopCarousel() {
  carousel.classList.remove('active'); // 移除active类停止轮播
}

startCarousel(); // 页面加载完成后开始轮播

这个示例使用了CSS的transform属性和关键帧动画来实现轮播效果。通过设置translateX属性来移动图片，达到轮播的效果。在JavaScript中，通过添加或移除active类来控制轮播的开始和停止。