不能发视频,截图来代替吧
1.显示 轮播图1(实际轮播的第2个元素li)
2.显示 轮播图2(实际轮播的第3个元素li)
3.显示 轮播图3(实际轮播的第4个元素li)
4.显示 轮播图1(实际轮播的第5个元素li,之后会紧跟着重复以上动作)
1、首先我们创建一个简单的项目,如图所示包括html,css和img三个。
2、这里是html文件,引入css和html代码文件,如图所示。
3、这里是css文件代码,上面是div和图片显示的效果代码,后面是动画效果。
4、这里是事件,这里定义了四个时间段的状态,兼容了ie的。
5、如图所示这里是效果图,会根据时间轮播显示下一张图片 了。
给你几个思路
将所有需要轮播的图片横向并排排列,定位设置为绝对定位,暂定为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.自己动手,丰衣足食