<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="utf-8"> <title>圖片輪播</title> <style> #box { width:506px; height:306px; margin: 20px auto; border:3px solid black; position:relative; background-color:orange; overflow: hidden; /*overflow: hidden;*/ } .pic { position: absolute; width:500px; height:300px; line-height: 300px; text-align: center; font-size: 100px; color:white; bottom:0; } .red { background-color:red; } .green { background-color:green; } .blue { background-color:blue; } .orange{ background-color: orange; } .move { bottom:300px; transition:bottom .5s; /* 設(shè)置圖片移動消耗的時間*/ } </style></head><body> <div id="box"> <div id="pic1" class="pic red">1</div> <div id="pic2" class="pic green">2</div> <div id="pic3" class="pic blue">3</div> <div id="pic3" class="pic orange">4</div> </div> <script> window.addEventListener('load',function(){ //輪播定時器 var looptime = null; var looptime2 = null; var pics = document.getElementsByClassName('pic'); //為每個pic元素設(shè)置z-index的值 for(let i=0;i<pics.length;i++){ pics[i].style.zIndex = pics.length-i; } //循環(huán)播放圖片的函數(shù) var loopPics = (function(){ var index; return function(pics,delay){ var recall = function(pic){ //給圖片增加move類，調(diào)用CSS的transition屬性播放移動動畫 pic.className += ' move'; index++; if(index==pics.length) index=0; looptime2=setTimeout(function(){ //取消圖片的move類，圖片返回原位 pic.className=pic.className.replace(' move',''); //改變圖片組的堆疊順序。最外的圖片放到最下面，其他圖片依次向外移動 for(let i=0;i<pics.length;i++){ if(pics[i].style.zIndex==pics.length){ pics[i].style.zIndex=1; } else { pics[i].style.zIndex=pics[i].style.zIndex*1+1; } } },500); looptime=setTimeout(function(){recall(pics[index]);},delay+500); }; //選擇當(dāng)前最頂層的圖片開始輪播 for(let i=0;i<pics.length;i++) { if(pics[i].style.zIndex==pics.length){ index=i; break; } } recall(pics[index]); }; })(); //調(diào)用函數(shù)，循環(huán)播放。delay的時間等于圖片輪播的間隔時間 loopPics(pics,3000); //鼠標放置在圖片區(qū)域時停止輪播 document.getElementById('box').onmouSEOver = function(){ clearTimeout(looptime); clearTimeout(looptime2); for(let i=0;i<pics.length;i++){ pics[i].className=pics[i].className.replace(' move',''); } }; //鼠標離開圖片區(qū)域后繼續(xù)輪播 document.getElementById('box').onmouseout = function(){ loopPics(pics,3000); }; }); </script></body></html>
新聞熱點
疑難解答
