JS实现最简单的轮播图及其原理

最新推荐文章于 2025-05-19 15:33:06 发布

原创最新推荐文章于 2025-05-19 15:33:06 发布 · 2.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#JS实现轮播图 #最简单的轮播图 #轮播图

学习日志同时被 3 个专栏收录

4 篇文章

订阅专栏

开发日志

2 篇文章

订阅专栏

2 篇文章

订阅专栏

本文详细介绍了轮播图的实现原理，通过简单的HTML、CSS和JS代码，展示了如何使用setInterval方法自动切换图片。适合初学者理解轮播图的基本工作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播图的实现——最基础的原理

方法1（使用setInterval的方法）：
看下网上很多教程，不论是html还是css的部分做的都太过于详细了，所以我把代码都尽量缩到了最简单，只是记录（给自己看）和讲解（给大家看）其中的原理，直接上代码。。。
1，html部分：

<div id="try">//做一个大框把轮播图片放进去即可
    <img src="1.png" style="display: block;" />//第一张图片设置显示，另外两张用css中display=‘none’来隐藏起来
    <img src="2.png"/>
    <img src="3.png"/>
  </div>

2，css部分：

#try img{           //选择id为try中的img图片
      position: absolute;           //位置设为相对位置，这样图片才会叠加在一起，不然只会按顺序排列，div最好
      设置宽高
      display: none;隐藏图片
    }

3，js部分：

	var tray=document.getElementById("try");   //获取id为try的文件
    var is=tray.getElementsByTagName('img');    //获取try中的图片
    var c=0;
	setInterval(function(){            //设置计时器，格式为setInterval（function(）{}，time）
      c++;                          //因为获取到的图片是一个数组，为显示后续图片，数组编号+1
      if (c==3) {                 //本例中只设置了3个图片，所以第三张图片之后，数组编码重新归零
      c=0;
      }

      for (var i = 0; i < is.length; i++) {     //做一个for循环，使每一个图片的display属性为none，隐藏图
      is[i].style.display='none';
      }
      is[c].style.display='block';          //显示第c张图片
	},1000)

方法2（使用其他的方法）：
未完待续。。。