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部分！

<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原生轮播图的简单实现(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。