以4张图片为例：1.基本布局：将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。2.设置动画：然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。4张图片，需要切换3次.根据需要可以对各个图片添加相应的序号和图片简介。 3.代码如下：
<style> #frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px} #dis{position:absolute;left:-50px;top:-10px;opacity:.5} #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000} #photos img{float:left;width:300px;height:200px} #photos { position: absolute;z-index:9; width: calc(300px * 4);/*---修改图片数量的话需要修改下面的动画参数*/ } .play{ animation: ma 20s ease-out infinite alternate;} @keyframes ma { 0%,25% { margin-left: 0px; } 30%,50% { margin-left: -300px; } 55%,75% { margin-left: -600px; } 80%,100% { margin-left: -900px; }
}</style><body><div id="frame" > <div id="photos" class="play"> <img src="images/1.jpg" > <img src="images/3.jpg" > <img src="images/4.jpg" > <img src="images/5.jpg" > <ul id="dis"> <li>111111111111111</li> <li>22222222222222</li> <li>33333333333333</li> <li>44444444444444</li> </ul> </div></div>
时间： 2024-08-13 16:43:52