html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...

我就是我 2022-10-05 15:58 292阅读 0赞

简单demo：使用HTML+CSS 实现轮播图(三张图为例，分别为：红、绿、蓝)的效果。

实现效果：

不能发视频，截图来代替吧

![25fca1ee01a5][]

示意图1.png

![25fca1ee01a5][]

示意图2.png

![25fca1ee01a5][]

示意图3.png

实现思路

使用 div+ul+li 的页面布局方式(div 的宽度和 li 的宽度相同)；

在 ul 中横向排列5个 li 元素(ul 的宽度 >= 5个 li 元素的和)，排列顺序为 ：轮播图3--轮播图1--轮播图2--轮播图3--轮播图1(为了滑动的连贯性不会出现倒滑现象做此设置)，要设置 ul 的默认左边距，使页面默认显示第2个 li 元素(也就是轮播图1)；

使 ul 进行动画移动，利用属性 “overflow: hidden” 使 li 依序显示出现轮滑效果。

HTML的代码如下：

*  3
 *  1
 *  2
 *  3
 *  1

CSS的代码如下：

.swiper \{

position: relative;

margin: 60px auto;

width: 600px;

height: 600px;

text-align: center;

font-family: Arial;

color: \#FFF;

overflow: hidden;

/\*自动播放\*/

.swiper .swiper-wrapper \{

margin-left: -600px;

animation: swiperAnim 9s infinite;

padding: 0;

width: 3000px;

height: 100%;

.swiper li \{

float: left;

width: 600px;

list-style: none;

line-height: 600px;

font-size: 100px;

background-size: cover;

background-repeat: no-repeat;

text-align: center;

.swiper li:nth-child(1) \{

background: blue;

/\*background-image: url(../img/pic\_8.png);\*/

.swiper li:nth-child(2) \{

background: red;

/\*background-image: url(../img/pic\_1.png);\*/

.swiper li:nth-child(3) \{

background: green;

/\*background-image: url(../img/pic\_2.png);\*/

.swiper li:nth-child(4) \{

background: blue;

/\*background-image: url(../img/pic\_8.png);\*/

.swiper li:nth-child(5) \{

background: red;

/\*background-image: url(../img/pic\_1.png);\*/

/\*动画\*/

@keyframes swiperAnim \{

0% \{

margin-left: -600px;

28.5% \{

margin-left: -600px;

33.3% \{

margin-left: -1200px;

62% \{

margin-left: -1200px;

66.7% \{

margin-left: -1800px;

95.2% \{

margin-left: -1800px;

100% \{

margin-left: -2400px;

轮播示意图

1.显示 轮播图1(实际轮播的第2个元素li)

![25fca1ee01a5][]

轮播示意图1.png

2.显示 轮播图2(实际轮播的第3个元素li)

![25fca1ee01a5][]

\{轮播示意图2.png

3.显示 轮播图3(实际轮播的第4个元素li)

![25fca1ee01a5][]

轮播示意图3.png

4.显示 轮播图1(实际轮播的第5个元素li,之后会紧跟着重复以上动作)

![25fca1ee01a5][]

轮播示意图4.png

完成

[25fca1ee01a5]: /images/20221005/fc7635e3811f45c7a89f23356c813f99.png

html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关纯css轮播图

相关纯CSS实现轮播图------Sestid

相关如何用纯CSS实现轮播图效果

相关轮播图实现html,html、css、js实现轮播图

相关 html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...

相关纯css自动全屏轮播图html代码,纯HTML和CSS实现JD轮播图效果

相关纯css实现轮播图

相关纯css3实现无缝轮播图效果

相关纯css3实现的轮播图效果（表单制作轮播图）

相关手动轮播图（纯css实现）