CSS怎么实现图片轮播

　　

CSS怎么实现图片轮播?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

在CSS中,可以使用动画属性和@keyframes规则来实现图片轮播效果。只需要先使用@keyframes创建动画,然后使用动画属性设置动画所需时间,速度以及次数等即可。

首先准备相同大小的多个图片,将要展示图片横排放在一个图片容器里面。在图片容器外再加一个展示容器,展示容器大小为图片大小,给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值。

动画效果分为切换和停留两部分,自定义动画阶段与图片数量相关,动画各阶段偏移值与图片大小相关。

本文中示例的是有第一个图片切换到最后一张图片。

<强> HTML

& lt; body> 　　,,,,,,,& lt; div  id=癱ontainer"比; 　　,,,,,,,,,,,& lt; div  id=皃hoto"比; 　　,,,,,,,,,,,,,,,& lt; https://www.yisu.com/zixun/img  src="/1. jpg图像"/> 　　 　　 　　
　　
　　%20%20

解析:
这里创建了三个img元素,img元素外面是图片容器,图片容器外面是展示容器。

%20

%20<强>%20CSS%20%20
%20

%20%20&%20lt;%20style 类型=拔谋?css"比; 　　,,,,,,,,,,,#%20container %20{ 　　,,,,,,,,,,,,,,,宽度:,400%20px; 　　,,,,,,,,,,,,,,,溢出:,隐藏; 　　,,,,,,,,,,,} 　　,,,,,,,,,,,#%20photo %20{ 　　,,,,,,,,,,,,,,,宽度:,1200%20px; 　　,,,,,,,,,,,,,,,动画:,switch %205%20s %20ease-out 无限; 　　,,,,,,,,,,,} 　　,,,,,,,,,,,#%20photo 祝辞,img %20{ 　　,,,,,,,,,,,,,,,:浮动,离开; 　　,,,,,,,,,,,,,,,宽度:,400%20px; 　　,,,,,,,,,,,} 　　,,,,,,,,,,,@keyframes %20switch %20{ 　　,,,,,,,,,,,,,,,0%,25%,{ 　　,,,,,,,,,,,,,,,,,,,,margin-left:%200; 　　,,,,,,,,,,,,,,,} 　　,,,,,,,,,,,,,,,35%,60%,{ 　　,,,,,,,,,,,,,,,,,,,margin-left:,%20-400%20px; 　　,,,,,,,,,,,,,,,} 　　,,,,,,,,,,,,,,,70%,100%,{ 　　,,,,,,,,,,,,,,,,,,,margin-left:,%20-800%20px; 　　,,,,,,,,,,,,,,,} 　　,,,,,,,,,,,} 　　,,,,,,,&%20lt;/style>%20%20

效果图:

%20

%20

解析:

<李>

展示容器大小和图片大小一致。

<李>

图片添加浮动效果,不用考虑麻烦的保证金问题;

<李>

由于示例只有三个图片,所以添加了三个动画阶段,每一阶段都是通过设置递增的margin-left值达到切换的效果;

<李>

设置的动画阶段(如:35% ~ 60%)是动画停留部分,和上一阶段空余时间(如25% ~ 35%)即为动画切换部分,各部分时间长短需要自己把控。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。

CSS怎么实现图片轮播