1、原理说明:
见视频:168-关键帧动画-轮播案例_哔哩哔哩_bilibili
(前3:44分钟)
文字说明:一个盒子里放里一个长条的盒子放很多小盒子,小盒子里面放的是图片,然后让这个小盒子浮动起来,轮播就是让长条盒子动。
思路:让最外面盒子固定的宽度和高度,这个盒子就是为了显示图片的轮播效果的,所以让图片的盒子宽度和高度和最外面盒子的宽高一样,让里面的长条盒子宽度无限大,为了放下浮动的所有图片,现在就是因为长条盒子里的图片很多,宽度超过了最外面那个盒子,所以对于最外面的盒子存在内容溢出的效果,这时候用overflow:hidden溢出隐藏的效果,刚好显示在最外面盒子里的就是一张图片的大小(因为我们刚开始设置装图片的那个小盒子的宽高=最外面盒子的宽高),这时候就让长条盒子移动就可以实现图片的轮播。。