可以利用两块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>
最终的效果图为