小编给大家分享一下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部分！
<div>
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/1.jpg" /></li>
</ul>
</div>接下来是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怎么实现原生轮播图”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
