在網頁設計中，圖片輪換是一種常見的效果。H5和CSS可以幫助我們實現自己的圖片輪換，非常方便。那么如何使用H5和CSS來實現圖片輪換呢？下面是簡單的代碼示例：

<div class="slider">
<img src="img1.png">
<img src="img2.png">
<img src="img3.png">
</div>

以上的代碼定義了一個slider類，包含三張圖片。接下來，我們需要使用CSS來控制這些圖片的輪換：

.slider {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.slider img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: opacity 1s ease-in-out;
}
.slider img:first-child {
opacity: 1;
z-index: 1;
}
.slider img.active {
opacity: 1;
z-index: 2;
}

首先，我們定義了.slider類，包括它的寬度、高度、位置以及溢出屬性。接著我們定義了.slider img類，即每張圖片的屬性。我們將每張圖片的大小設置為100%，并將其定位在左上角。我們還將其透明度設置為0，并將其z-index屬性設置為-1，以保證當前只有一張圖片在屏幕上可見。我們還設置了一個1秒的漸變效果，并使用了first-child偽類，將第一張圖片的z-index屬性設置為1。最后，我們定義了一個.active類，將其透明度設置為1，z-index屬性設置為2，以將活動圖片帶到頂部。

使用jQuery來實現輪播：

$(document).ready(function() {
var first_img = $('.slider img:first-child');
setInterval(function() {
var active_img = $('.slider img.active');
var next_img = active_img.next();
if (next_img.length == 0) {
next_img = first_img;
}
active_img.removeClass('active');
next_img.addClass('active');
}, 3000);
});

最后，我們使用jQuery來實現輪播。我們定義一個匿名函數，并設置一個3000毫秒的計時器。我們首先找到當前活動圖片，然后找到下一張圖片，并將.active類分別分配給它們，以控制圖片的滑動。當我們達到最后一張圖片時，我們需要將下一個圖片設置為第一張圖片，以形成一個無限循環。

以上是滑動圖片的HTML和CSS樣式的基本代碼，當然這只是一個簡單的示例，你可以根據自己的需求進行修改和定制。這種圖片輪換效果在網頁中非常常見，它的實現方法不僅簡單，而且效果很好。如果您正在設計一個網站并需要這種圖片輪換效果，那么使用H5和CSS就是最簡單的解決方案。