原生js实现最简单的轮播图

我就是我 2022-05-23 08:40 276阅读 0赞

代码部分：

html:

  1. <div>
  2.  <ul>
  3.  <li><img src="01.jpg" width="300px"></li>
  4.  <li><img src="02.jpg" width="300px"></li>
  5.  <li><img src="03.jpg" width="300px"></li>
  6.  </ul>
  7. </div>

css:

  1. div{
  2.     position: relative;
  3.     left: 500px;
  4.     top:100px;
  5.     width: 300px;
  6.     height: 200px;
  7.     overflow: hidden;
  9. }
  11. li{
  12.     list-style: none;
  13. }

js代码：

  1. var li = document.getElementsByTagName('li');
  2. var num=0;      
  3. var len=li.length;  
  5. setInterval(function(){  
  6.     li[num].style.display="none";
  8. num=++num==len?0:num;
  10. li[num].style.display="block";
  12. },2000);

发表评论

表情：
评论列表 （有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

    相关 原生JS实现简单的轮播图

    注意 我们用原生JS来做一个简单的无缝轮播图，首先需要准备几张**图片作为材料**，图片的链接需要自己设置，所以这边我的代码中图片链接的位置请大家自己添加图片。 ...

    迷南。迷南。/ 0 赞/ 151 阅读

    相关 原生js实现轮播图

    轮播图基本上是前端所必须面临的一个功能。而且在网上可以找到各种各样的插件或者写法。 但是我个人觉得还是写一下比较好。这里用到的是原生JS、CSS3相结合的写法。 对IE 8

    我就是我我就是我/ 0 赞/ 431 阅读

    相关 轮播图 原生js实现

    原生js实现轮播图 　很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。 　[

    你的名字你的名字/ 0 赞/ 464 阅读