js通过opcity来实现轮播

思路：通过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%;
}