很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出。
原理:
将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播。
步骤一:建立html基本布局
如下所示:
轮播图只有五张图片,却使用7张来轮播,这是为了实现无缝轮播,后面会详细介绍。
而5个span,即我们可以实时看到轮播图目前所处的位置。
最后是两个按钮,可以通过它来控制前进与后退。
这里我们需要对wrap使用绝对定位,所以用left:-600px;将第一张图片显示出来。
步骤二: css布局
首先,resetcss,如下所示:
* {
margin:0;
padding:0;
}
a{
text-decoration: none;
}
接着,我们为了让图片只在container中,所以需要限定其宽度和高度并且使用overflow:hidden;将其余的图片隐藏起来,并且我们希望wrap相对于container左右移动,所以设置为relative,如下:
.container {
position: relative;
width: 600px;
height: 400px;
margin:100px auto 0 auto;
box-shadow: 0 0 5px green;
overflow: hidden;
}
我们设置wrap是绝对定位的,所以,我们就可以通过控制Left和Right来控制图片的移动了。设置z-index:1;以对后面将要放置的buttons作为参考。 因为共有七张图片,所以width为4200px(每张图片我们设置为600X400),我们只需让图片左浮动即可实现占满一排了。
.wrap {
position: absolute;
width: 4200px;
height: 400px;
z-index: 1;
}
然后我们把图片设置位左浮动,并限定其大小,如下所示:
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
现在的效果如下:
即这时已经显示出了第一张图片。并且充满了整个container(container是有box-shadow的);
然后我们把显示次序的buttons放在图片的右下角。并且设置z-index:2;以保证buttons是在图片的上面的。
.container .buttons {
position: absolute;
right: 150px;
bottom:20px;
width: 100px;
height: 10px;
z-index: 2;
}
然后将buttons下面的span做一个简单的修饰,并且给和图片对应的span设置一个on类,如下:
.container .buttons span {
margin-left: 5px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
text-align: center;
color:white;
cursor: pointer;