css实现轮播图

轮播图：就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片

轮播图的实现代码：

1）创建一个容器来进行轮播图的展示

这里的容器就是最外部的盒子

注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致，这样就可以保证一次轮播一张图片

最外部的盒子
<div class="box1></div>

最外部盒子的css样式
.box1{
width:722px;
height:358px;
margin:0 auto;
overflow: hidden; 
}

/* overflow: hidden; 溢出隐藏 并且不占有位置 当没有添溢出隐藏时 图片的展示如上图所示 */

2）创建一个盒子来存存储所有的图片

<div class="box"></div>

放置所有的图片的容器的样式的设置 这里为了让所有的图片在一行显示如上图所示，需要给盒子足够的宽，
.box{
width:2200px;
height:352px;
}

同时第一个盒子添加 overflow: hidden; 呈现出来的总体样式是

这是因为其他图片隐藏了

3)添加图片