CSS膠片滑動圖是一種非常流行的網頁設計元素，它可以在一個網頁上展示多個圖片或者內容，以吸引用戶的眼球。現在，我們就來學習一下如何使用CSS實現這個效果。

HTML代碼示例：
<div class="slider">
<div class="slider-wrapper">
<div class="slide"><img src="img/1.jpg" alt=""></div>
<div class="slide"><img src="img/2.jpg" alt=""></div>
<div class="slide"><img src="img/3.jpg" alt=""></div>
<div class="slide"><img src="img/4.jpg" alt=""></div>
</div>
</div>
CSS代碼示例：
.slider{
position:relative;
overflow:hidden;
width:100%;
height:500px;
}
.slider-wrapper{
display:flex;
position:absolute;
top:0;
left:0;
width:400%;
height:100%;
transition:transform 0.5s;
}
.slide{
width:25%;
}
.slide img{
width:100%;
}
JavaScript代碼示例：
let slider = document.querySelector(".slider");
let sliderWrapper = document.querySelector(".slider-wrapper");
let slides = document.querySelectorAll(".slide");
let slideWidth = slides[0].clientWidth;
let currentIndex = 0;
function moveSlider(index){
sliderWrapper.style.transform = "translateX(-" + index * slideWidth + "px)";
}
setInterval(function(){
currentIndex++;
if(currentIndex >slides.length - 1){
currentIndex = 0;
}
moveSlider(currentIndex);
}, 3000);

在上面的代碼中，我們首先定義了一個.slider的容器，并通過CSS的position和overflow屬性來調整它的布局。然后定義了一個.slider-wrapper容器，并通過CSS的position和transition屬性來實現滑動效果。最后，我們通過JavaScript來設置定時器，實現自動滑動膠片的功能。

總的來說，CSS膠片滑動圖是一種非常實用的網頁設計元素，它可以很好地展示多個圖片或者內容，同時也可以增強用戶的體驗。希望以上示例對大家有所幫助。