JS原生轮播图

Posted on 2017-07-22 07:52  ITandYT  阅读(462)  评论(0)  编辑  收藏  举报

哈喽！我的朋友们，最近有一个新项目。所以一直没更新！有没有想我啊！！

今天咱们来说一下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             }

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