CSS 轮播图的实现(纯CSS,连续滑动无倒滑效果)

html-css08

CSS 轮播图的实现(纯CSS,连续滑动无倒滑效果),第1张

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

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

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

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

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

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

不推荐css写轮播图是在css中轮播中的图像无法填充整个宽度。根据查询相关公开信息显示轮播图对多种设备宽度都不适合,超过1200像素时,css中轮播的图像无法填充整个宽度。当删除媒体查询时,工作恢复正常。轮播图不能在css中使用。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css实现轮播效果</title><style type="text/css">.one { position: absolutewidth: 500pxheight: 400pxoverflow: hidden} .one_cantent img { width: 500pxheight: 300pxfloat: left} .one_cantent { width: 2500pxheight: 400pxposition: absoluteleft: 0pxanimation-name: moveanimation-duration: 10sanimation-iteration-count: infinite} @keyframes move { 0% { left: 0px} 25% { left: -500px} 50% { left: -1000px} 75% { left: -1500px} 100% { left: -2000px } } </style></head><body><div><div><img src="./image/0.jpg"><img src="./image/1.jpg"><img src="./image/2.jpg"><img src="./image/3.jpg"><img src="./image/4.jpg"></div></div></body></html>