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

html-css099

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

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

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

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

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

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

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

预览地址: 纯css3:radio+label实现轮播图

轮播图这东西,我相信只要是做前端的,肯定都做过,不过大部分应该都是用js来实现的,其实css3也是可以实现轮播图的,而且也可以加一些动画之类的,下边就分享下思路。声明,这里没有贬低 js 的意思,相反, js 能做的, css 基本做不到, css 能做的, js 基本能做到,这里纯粹就是为了分享 css 的一些运用。

css 里有个可以绑定到 <input>上的标签 <label>,它的功能就是当你点击所绑定的这个 <label>的时候,就可以选中相应的 <input>,既然有了这个功能,那就有了控制轮播图的方法了。

通过 css 可以看到,其实这个例子主要用到的就是 <input type="radio">的 :checked 伪类选择器然后通错 css3 的 :nth-of-type(n) 节点选择器控制与之相对应的轮播、按钮,整个例子也没什么难度,也就不废话了。

给你几个思路

将所有需要轮播的图片横向并排排列,定位设置为绝对定位,暂定为pic-list。设置一个轮播图box,暂定为lb-box,lb-box依每张图片的宽高设置宽高,并将over-flow设置为hidden。将pic-list放到lb-box里,现在应该看到的是一张图片,设置一个定时器,每三秒或几秒执行一次,执行事件是将pic-list的left属性每次减去一张图片的宽度,到减完pic-list的宽度后,将left设置为0,轮播图完成。

第二种思路,设置一个放置轮播图的box,定为lb-box,宽高一样为一张图片的宽高,将所有的轮播图名字命名为统一格式,比如(pic-1.png,pic-2.png,pic-3.png)。lb-box里放轮播图种的第一张图如(pic-1.png),设置一个定时器,每三秒或几秒执行一次,执行的事件是将轮播图的src属性改成pic-2.png(具体可设置一个变量进行++操作)。到最后一个轮播图再将轮播图src属性设置为pic-1.png。轮播图完成

PS.自己动手,丰衣足食