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 延时执行
                }
            }

就是这么简单！你学会了吗？？