哈嘍！我的朋友們，最近有一個新項目。所以一直沒更新！有沒有想我啊！！

今天咱們來說一下JS原生輪播圖！

話不多說：

直接來代碼吧：下面是CSS部分：

 1 *{
 2                 padding: 0px;
 3                 margin: 0px;
 4             }
 5             img{
 6                 width: 500px;
 7                 height: 300px;
 8             }
 9             li{
10                 float
 
: left;
11             }
12             ul{
13                 width: 2000px;
14                 list-style: none;
15                 position: absolute;
16             }
17             div{
18                 width: 500px;
19                 height: 300px;
20                 /*溢出部分隱藏*/
21                 overflow
 
: hidden;
22                 margin: 60px auto;
23                 position: relative;
24             }

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 //1、獲取到ul
 2             var ul = document.getElementsByTagName("ul")[0];
 3             var x = 0;
 4             
 5             //id 用來關閉定時器的
 6             var id = setInterval(abc,10);
 7             
 8             function abc(){
 9                 ul.style.left = x-- +"px";
10                 
11                 //如果到第三周圖片了
12                 if(x == -1500){
13                     x = 0;//把ul修改成第一張圖片
14                     ul.style.left = x+"px";
15                 }
16                 if(x % 500 == 0){ //第一張圖片進來
17                     clearInterval(id); //關閉定時器
18                     //開啟定時器 隔半秒鐘開啟定時器
19                     setTimeout(function(){
20                         //500毫秒之後開啟定時器，繼續執行
21                         id = setInterval(abc,10);
22                     },500);//setTimeout 延時執行
23                 }
24             }

就是這麽簡單！你學會了嗎？？

JS原生輪播圖