css仿相机滑动 |css图片超出 显示部分

首先，大家需要在HTML中定义一个容器，用来包裹图片，可以给容器一个特定的class，例如“slider-container”：

<div class="slider-container">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>

然后在CSS中定义slider-container的样式：

.slider-container{
position:relative;
width:800px;
height:500px;
overflow:hidden;
}

大家把容器设置成相对定位，定义它的宽度和高度，并且隐藏超出容器宽度范围的内容。

接着，大家给每一张图片设置样式：

.slider-container img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:transform 1s ease-in-out;
transform:translateX(0);
}

大家把每张图片的定位设为绝对定位，设定每张图片的宽度和高度都为100%。并且，大家添加了过渡效果，使得图片切换时会有平滑的动画效果。最后，大家设置每张图片的translateX属性为0，默认显示第一张图片。

最后，大家通过JavaScript来控制图片的滑动：

var index=0;
var slides=document.getElementsByTagName("img");
setInterval(function(){
index++;
if(index==slides.length){
index=0;
}
for(var i=0;i<slides.length;i++){
slides[i].style.transform="translateX("+(i-index)*100+"%)";
}
},3000);

大家先定义一个变量index表示当前显示的图片，然后获取所有图片。通过setInterval方法，每3秒执行一次，index自增，超过最大图片张数时重新从0开始，然后遍历所有图片，计算出每张图片的位置，以达到滑动的效果。

到此为止，大家的仿相机滑动就完成了。如果您想要更好的呈现效果，可以添加一些样式和动画，使您的网页更加华丽动人。希望本文能帮助到您，谢谢阅读！