思路:通过opcity:0,opcity:1对图片样式的进行切换,结合定时器,控制显示与隐藏,达到轮播的效果。
首先,图片需在窗口的同一位置叠放,可以用绝对定位实现。
通过JS控制opcity属性实现轮播效果,具体实现看代码:
HTML代码:
<div class="banner">
<div class="banner_div">
<ul class="banner_ul">
<li class="banner_ul_li"><a href=""><img src="images/banner.jpg" alt=""></a></li>
<li class="banner_ul_li"><a href=""><img src="images/banner1.jpg" alt=""></a></li>
<li class="banner_ul_li"><a href=""><img src="images/banner2.jpg" alt=""></a></li>
<li class="banner_ul_li"><a href=""><img src="images/banner3.jpg" alt=""></a></li>
</ul>
<div class="banner_arrow">
<a href="javascript:;" id="prev"><img class="banner_arrow_prev" src="images/prev.png" alt=""></a>
<a href="javascript:;" id="next"><img class="banner_arrow_next" src="images/next.png" alt=""></a>
</div>
<div class="follow">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
CSS代码:
.banner_ul_li {
width: 100%;
float: left;
margin-right: -100%;
}
.banner_ul li a img {
display: block;
width: 100%;
}