简单通过js实现轮播图

匿名 (未验证) 提交于 2019-12-02 23:40:02

选取几张图片然后用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); }

显示效果:

转载请标明出处:简单通过js实现轮播图
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!