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

完整的顺序如下：

　　1、先设定两个div，

1 <div id="banner">
2     <div id="top"></div>
3     <div id="down"></div>
4 </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设定其动作的行为：

 1 <script type="text/javascript">
 2     var bav_top=document.getElementById("top");
 3     var bav_down=document.getElementById("down");
 4     var flag="top";
 5     var i=0;
 6     var cor=["blue","pink","black"];
 7     bav_top.style.backgroundColor=cor[0];
 8     setInterval(ban_move,2000);
 9     function ban_move(){
10 
11         if(flag=="top"){
12             i++;
13             if(i>2){
14                 i=0;
15             }
16             console.log(i)
17             bav_down.style.zIndex=0;
18             bav_top.style.zIndex=1;
19             bav_down.className="";
20             bav_down.style.backgroundColor=cor[i];
21 
22             bav_top.className="move_up";
23             flag="down";
24         }else{
25             i++;
26             if(i>2){
27                 i=0;
28             }
29             console.log(i)
30             bav_down.style.zIndex=1;
31             bav_top.style.zIndex=0;
32             bav_top.className="";
33             bav_top.style.backgroundColor=cor[i];
34 
35             bav_down.className="move_up";
36             flag="top";
37         }
38     }
39 </script>

最终的效果图为