在現代的網頁設計中，輪播圖已經成為了一個非常常見的元素。為了使整個頁面看起來更加美觀，我們通常會使用一些 JavaScript 插件來實現圖片輪播效果。然而，對于一些簡單的頁面，我們可以很容易地使用 HTML 和 CSS 實現圖片輪播效果。

在本文中，我們將會介紹一種使用 HTML 和 CSS 實現的自適應圖片輪播代碼。這個代碼可以自適應不同的屏幕大小，并且適合于 PC 和移動設備。代碼如下所示：

<div class="slider">
<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">
<div class="slide"><img src="image1.jpg" alt="Image 1" /></div>
<div class="slide"><img src="image2.jpg" alt="Image 2" /></div>
<div class="slide"><img src="image3.jpg" alt="Image 3" /></div>
</div>
<div class="navigation">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
</div>

首先，我們創建一個類名為 "slider" 的 div，用于包裝整個輪播圖。然后，我們在里面創建了三個 input 標簽，分別代表三張圖片。注意到我們添加了一個 checked 屬性來表示初始時為第一張圖片。我們還為每個 input 添加了一個唯一的 id，用于與下面的 div class="navigation" 相對應。

接下來，我們在 div class="slider" 中創建了一個名為 slides 的 div，用于承載圖片。我們在里面使用了三個 div，分別代表三張圖片。我們使用 img 標簽來插入實際的圖片，并且使用 alt 屬性來提供圖片的描述。在 CSS 中，我們使用 display: flex 和 overflow: hidden 來設置輪播圖的樣式。

最后，我們為輪播圖添加了導航。我們在 div class="slider" 中創建了一個名為 navigation 的 div，用于包括所有的 label 標簽。注意到我們在 label 標簽中使用了 for 屬性，將它們與上面的 input 標簽對應起來。我們使用 display: flex 和 justify-content: center 來設置導航的樣式。

通過上述代碼，我們成功地實現了一個自適應的圖片輪播效果。我們可以根據實際情況修改 CSS 樣式，來達到更好的視覺效果。