纯HTML+JS实现轮播的方法

下面是一个使用纯HTML和JavaScript实现的简单轮播图示例。这个例子中，我们有三张图片，它们会在一定的时间间隔内自动切换。

HTML部分：

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

CSS部分（用于样式设置）：

#carousel {  
    position: relative;  
    width: 500px; /* 调整为你的图片宽度 */  
    height: 300px; /* 调整为你的图片高度 */  
    overflow: hidden;  
}  
  
#carousel img {  
    position: absolute;  
    width: 100%;  
    height: auto;  
    opacity: 0;  
    transition: opacity 1s ease-in-out;  
}  
  
#carousel img.active {  
    opacity: 1;  
}

JavaScript部分（用于实现轮播）：

var carouselImages = document.querySelectorAll('#carousel img');  
var currentIndex = 0;  
  
function showImage(index) {  
    carouselImages.forEach(function(img, i) {  
        img.classList.remove('active');  
        if (i === index) {  
            img.classList.add('active');  
        }  
    });  
}  
  
function nextImage() {  
    currentIndex = (currentIndex + 1) % carouselImages.length;  
    showImage(currentIndex);  
}  
  
// 每3秒切换一张图片  
setInterval(nextImage, 3000);  
  
// 初始化，显示第一张图片  
showImage(currentIndex);

请注意，你需要将image1.jpg、image2.jpg和image3.jpg替换为你自己的图片路径。此外，你可能还需要根据你的具体需求调整CSS样式。这个示例中，我们使用CSS的opacity属性来隐藏和显示图片，并使用transition属性来添加淡入淡出的效果。

这个示例是一个基础版本的轮播图，如果你需要更复杂的功能（比如左右箭头切换、下方的圆点指示器等），你可能需要使用更复杂的JavaScript代码，或者考虑使用现成的轮播图库。