JS原生輪播圖

哈嘍！個人朋友們，最近有一個新項目。因此一直沒更新！有沒有想我啊！！

今天我們來講一下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 //一、獲取到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             }

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