CSS實現圖片左右滑動是網頁設計中經常使用的一個技巧，下面我們一起來學習一下如何實現。

<code>
/* HTML代碼 */
<div class="slider">
<ul class="slider-list">
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
<li><img src="img4.jpg"></li>
</ul>
</div>
/* CSS代碼 */
.slider {
width: 800px;
height: 400px;
overflow: hidden;
margin: 0 auto;
}
.slider-list {
list-style-type: none;
margin: 0;
padding: 0;
width: 4000px; /* 圖片總寬度 */
position: relative;
left: 0;
transition: left 0.5s ease-in-out; /* 動畫效果 */
}
.slider-list li {
float: left;
width: 800px;
height: 400px;
}
.slider-list li img {
width: 100%;
height: 100%;
display: block;
}
/* JavaScript代碼 */
var sliderList = document.querySelector('.slider-list');
var sliderItem = document.querySelectorAll('.slider-list li');
var sliderLength = sliderItem.length;
var sliderIndex = 0;
var sliderWidth = 800;
setInterval(function() {
if (sliderIndex >= sliderLength - 1) {
sliderIndex = 0;
} else {
sliderIndex++;
}
sliderList.style.left = '-' + (sliderIndex * sliderWidth) + 'px';
}, 3000);
</code>

解析：

首先，我們在HTML中創建一個div容器，并設置overflow:hidden來隱藏超出容器寬度的部分，在這個容器內部，我們設置一個ul，將要滑動的圖片放在li標簽中。CSS中，我們需要設置ul的寬度為所有圖片寬度之和，left為0，因為我們要實現圖片向左滑動，JavaScript中，我們創建一個定時器，每隔3秒切換到下一張圖片，當到達最后一張時，返回到第一張。

以上代碼是CSS實現圖片左右滑動的簡單實現，你可以根據自己的需求進行修改和擴展。