html+css焦点图轮播

### 使用HTML和CSS创建简单的焦点图轮播效果

#### 创建基本结构
为了构建一个基础的轮播组件，首先定义 HTML 结构。此部分将展示如何设置图片容器以及导航按钮。

<div class="carousel">
    <input type="radio" name="slider" id="slide1" checked>
    <input type="radio" name="slider" id="slide2">
    <input type="radio" name="slider" id="slide3">

    <div class="slides">
        <img src="image1.jpg" alt="">
        <img src="image2.jpg" alt="">
        <img src="image3.jpg" alt="">
    </div>

    <!-- 控制器 -->
    <label for="slide1"></label> 
    <label for="slide2"></label> 
    <label for="slide3"></label> 

</div>

上述代码片段展示了轮播图的基本框架[^1]。

#### 添加样式布局
接下来通过 CSS 来控制外观并实现切换逻辑：

.carousel {
    position: relative;
}

.slides img {
    display:none; /* 默认隐藏 */
    width: 100%;
}

/* 显示选中的图像 */
#slide1:checked ~ .slides img:nth-child(1),
#slide2:checked ~ .slides img:nth-child(2),
#slide3:checked ~ .slides img:nth-child(3){
    display:block;
}

这段 CSS 定义了每张图片默认状态下不可见，并且当对应的单选框被激活时显示相应的图片。

#### 实现自动播放功能（可选）
虽然当前例子不涉及 JavaScript 动画，但是可以通过纯 CSS 的方式模拟简单的时间间隔变化来达到自动播放的效果:

@keyframes slideShow{
    from {left:-100%;}
    to {left:0;}
}

.slideshow-container {
    overflow:hidden;
}

.slide-show {
    animation-name: slideShow;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

请注意这只是一个非常基础版本的实现方案，在实际项目中可能还需要考虑更多细节如响应式设计、触摸支持等功能。