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