一丶思路
动画可以让盒子移动,可以让背景图移动,所以同样的图片也同样能使用动画进行移动,而这刚好不就是轮播图的效果,所以可以使用定位加上动画制作简易的轮播图,先来一个banner区域的盒子使用相对定位,然后对专门放image图片的大盒子使用绝对定位并且对其使用动画效果,最后在banner区域的盒子上使用一个overflow: hidden溢出隐藏即可
效果图如下:
二丶步骤 1.先设置一个banner区域的盒子,用ul,li标签,ul做轮播图的大盒子li标签做放图片的小盒子 2.这里我找了4张图片,并且给每个li盒子设置好宽高与banner区域盒子宽高相同, 3.再对ul放轮播图的大盒子设置4张图片的总宽度 4.然后对li进行浮动,使得4张图片水平显示 5.对banner盒子设置相对定位,对ul设置绝对定位 6.对ul盒子进行定义动画和调用 7.ul盒子移动相当于带动图片移动,而溢出的图片对其进行溢出隐藏就形成了轮播图的效果
代码如下:
