下面小编就为大家带来一篇JS原生轮播图的简单实现(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
哈喽！我的朋友们，最近有一个新项目。所以一直没更新！有没有想我啊！！
今天咱们来说一下JS原生轮播图！
话不多说：
直接来代码吧：下面是CSS部分：
*{ padding: 0px; margin: 0px; } img{ width: 500px; height: 300px; } li{ float: left; } ul{ width: 2000px; list-style: none; position: absolute; } div{ width: 500px; height: 300px; /*溢出部分隐藏*/ overflow: hidden; margin: 60px auto; position: relative; }HTML部分！
接下来是JS部分：
//1、获取到ul var ul = document.getElementsByTagName("ul")[0]; var x = 0; //id 用来关闭定时器的 var id = setInterval(abc,10); function abc(){ ul.style.left = x-- +"px"; //如果到第三周图片了 if(x == -1500){ x = 0;//把ul修改成第一张图片 ul.style.left = x+"px"; } if(x % 500 == 0){ //第一张图片进来 clearInterval(id); //关闭定时器 //开启定时器 隔半秒钟开启定时器 setTimeout(function(){ //500毫秒之后开启定时器，继续执行 id = setInterval(abc,10); },500);//setTimeout 延时执行 } }就是这么简单！你学会了吗？？
以上就是JS原生轮播图的简单实现(推荐)的详细内容，更多请关注0133技术站其它相关文章！
