利用动画+div的前后切换实现轮播

可以利用两块div（分别设为前和后），用绝对定位使两块div重合，再利用z-index实现两块div的堆叠顺序（即显示的变换），利用动画和定时器实现轮播，这就是基本的思路。

完整的顺序如下：

　　1、先设定两个div，

 <div id="banner">
     <div id="top"></div>
     <div id="down"></div>
 </div>

　　2、给两块div设定宽高，并设为绝对定位（这里准确的位置自行设定），使其重合，这里需要注意的是必须给两块div的父元素加一个相对定位（这里最好加上overflow: hidden;隐藏掉移动到父元素外的），让两块div以其父元素进行定位。

        #banner{
            width: 980px;
            height: 300px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            border: 1px solid red;
　　　　　　/* 设为相对定位*/
        }
        #top{
            width: 980px;
            height: 300px;
            position:absolute;
        }
        #down{
            width: 980px;
            height: 300px;
            position:absolute;
            /*设为绝对定位*/
        }

　　

　　3、设定动画效果：

        @-webkit-keyframes  mymove{
            0%{
                left:0px;
            }
            25%{
                left:-245px;
            }
            50%{
                left:-490px;
            }
            75%{
                left:-735px;
            }
            100%{
                left:-980px;
            }
        }
        .move_up{
            -webkit-animation: mymove 1.5s linear  forwards;
        }

　　　

　　4、再用js设定其动作的行为：

 <script type="text/javascript">
     var bav_top=document.getElementById("top");
     var bav_down=document.getElementById("down");
     var flag="top";
     var i=0;
     var cor=["blue","pink","black"];
     bav_top.style.backgroundColor=cor[0];
     setInterval(ban_move,2000);
     function ban_move(){

         if(flag=="top"){
             i++;
             if(i>2){
                 i=0;
             }
             console.log(i)
             bav_down.style.zIndex=0;
             bav_top.style.zIndex=1;
             bav_down.className="";
             bav_down.style.backgroundColor=cor[i];

             bav_top.className="move_up";
             flag="down";
         }else{
             i++;
             if(i>2){
                 i=0;
             }
             console.log(i)
             bav_down.style.zIndex=1;
             bav_top.style.zIndex=0;
             bav_top.className="";
             bav_top.style.backgroundColor=cor[i];

             bav_down.className="move_up";
             flag="top";
         }
     }
 </script>

最终的效果图为