本文主要是介绍原生js实现轮播图-setInterval, setTimeout，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原生js实现轮播图-setInterval, setTimeout 目录
文章目录
- 前言
- 代码实现
- `setTimeout`和递归实现
- `setInterval`
- 效果展示
前言
- 利用原生
js实现轮播图 - 代码复制可用
代码实现
setTimeout和递归实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let img = document.createElement('img');img.width = 800,img.height = 500;document.body.appendChild(img);// 图片的路径let imgList = ['./1.jpg', './2.jpg', './3.jpg'],start = 0;function run(){if(start >= imgList.length) start = 0;img.src = imgList[start++];setTimeout(()=>{run()},2000);}run();</script>
</body>
</html>
setInterval
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let img = document.createElement('img');img.width = 800,img.height = 500;document.body.appendChild(img);let imgList = ['./1.jpg', './2.jpg', './3.jpg'],start = 0;setInterval(()=>{if(start >= imgList.length) start = 0;img.src = imgList[start++];},2000);</script>
</body>
</html>
效果展示
这篇关于原生js实现轮播图-setInterval, setTimeout的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
