选取几张图片然后用HTML放入图片,CSS布局,js用setInterval设置时间延时 进行自动播放
代码部分:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="1111.css"> <script src="1111.js"></script> </head> <body> <div id="lunbo" class="lunbo"> <div class="lunbotu"> <a href=""> <img src="img1.jpg" alt=""> </a> </div> <div class="lunbotu"> <a href=""> <img src="img2.jpg" alt=""> </a> </div> <div class="lunbotu"> <a href=""> <img src="img3.jpg" alt=""> </a> </div> </div> </body> </html>
CSS
.lunbo img{ width:410px ; height: 225px; } .lunbotu{ position: absolute; left:310px; top:0; /*z-index: 2;*/ display: none; }
JS
window.onload=function () { var lunboimg = document.getElementById('lunbo').getElementsByTagName('div'); var n=0; function lunbofun() { for (var i=0;i<lunboimg.length;i++){ lunboimg[i].style.display='none'; } lunboimg[n].style.display='block'; } function start(){ n++; if (n>=lunboimg.length) { n=0; } lunbofun(); } setInterval(start,3000); }
显示效果: