文章内容
选取几张图片然后用HTML放入图片，CSS布局，js用setInterval设置时间延时 进行自动播放
1、HTML
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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> |
2、CSS
01 02 03 04 05 06 07 08 09 10 | .lunbo img{ width:410px ; height: 225px;}.lunbotu{ position: absolute; left:310px; top:0; /*z-index: 2;*/ display: none;} |
3、JS
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | 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);} |