用HTML和CSS写一个轮播图

好的，以下是代码示例：

HTML:

<div class="slideshow-container">
   <div class="mySlides fade">
     <img src="image1.jpg" style="width:100%">
   </div>
   <div class="mySlides fade">
     <img src="image2.jpg" style="width:100%">
   </div>
   <div class="mySlides fade">
     <img src="image3.jpg" style="width:100%">
   </div>
</div>
<br>
<div style="text-align:center">
   <span class="dot"></span> 
   <span class="dot"></span> 
   <span class="dot"></span> 
</div>

CSS:

.mySlides {
    display: none;
}

.slideshow-container {
    width: 100%;
    position: relative;
}

.slideshow-container img {
    vertical-align: middle;
    width: 100%;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #717171;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }
    
    to {
        opacity: 1
    }
}

这个轮播图有三张图片，可修改成任意张。另外，还有以下特点：

- 支持自动播放和手动点击，不依赖于任何 JavaScript 框架；
- 小圆点显示当前显示的图片；
- 图片会渐变淡入淡出；
- 轮播图响应式，适应于不同设备。