H5和CSS3的出現，讓網頁設計更加豐富多彩。其中圖片滑動是一種常見的效果，本文將介紹如何使用H5和CSS3實現圖片滑動效果。

HTML代碼：
<div class="slider-wrap">
<div class="slider">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>
</div>
CSS代碼：
.slider-wrap {
width: 400px;
height: 300px;
overflow: hidden;
}
.slider {
width: 1200px;
height: 300px;
position: relative;
left: 0;
transition: all 0.5s ease;
}
.slider img {
width: 400px;
height: 300px;
float: left;
}
JS代碼：
var slider = document.querySelector('.slider');
setInterval(function() {
if (slider.offsetLeft == -800) {
slider.style.left = '0';
} else {
slider.style.left = slider.offsetLeft - 400 + 'px';
}
}, 3000);

以上代碼實現了三張圖片在瀏覽器中水平滑動的效果。

其中CSS代碼中.slider-wrap設置了固定的寬度和高度，并將溢出內容隱藏。.slider用于包裹圖片，并設置為相對定位，left值隨JS代碼控制水平滑動。.slider img設置每張圖片的寬度、高度和浮動方向。

JS代碼中使用了setInterval方法每隔3秒鐘判斷一次slider的left值，當left等于-800時將left重置為0，否則將left值減少400。

通過HTML、CSS和JS的組合，實現了H5和CSS3圖片滑動效果。