工作中经常会用到轮播图,这里记载两种轮播图,供大家参考
一、自动播放的无缝轮播图(一张图片占满屏)
首先是HTML,
<div class='bannerCon'>
<ul class="bannerContainer" id="bannerContainer">
<li class="banner"><img src="../imgs/banner1.png" alt=""></li>
<li class="banner"><img src="../imgs/banner2.png" alt=""></li>
<li class="banner"><img src="../imgs/banner3.png" alt=""></li>
<li class="banner"><img src="../imgs/banner4.png" alt=""></li>
<li class="banner"><img src="../imgs/banner5.png" alt="" ></li>
</ul>
<div class="bannerTip">
<ul class="bannerUL" id="bannerTip"></ul>
</div>
</div>
下面是样式表:
.bannerCon{
overflow:hidden;
width:100%;
position:relative;
}
.bannerContainer{
position:relative;
}
.bannerContainer li{
float:left;
}
.bannerContain