JS原生轮播图

最近一直忙着市场方面的工作,能利用的琐碎时间越来越少,终于趁着周末时间,可以安静下来好好享受片刻的安静时光。打开个人博客,发现好久没有更新过技术方面的文章了,今天咱们来说一下JS原生轮播图!轮播图可以更加有效的利用页面空间,具体有一定的动态展示特效。本文所讲的轮播图为最简单示例,还有很多类似轮播特效的JS,大家可以去一些JS案例库查找。话不多说,直接来代码吧:

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



* ![](/images/uploads/2018/02/2017072301.png)
* ![](/images/uploads/2018/02/2017072302.png)
* ![](/images/uploads/2018/02/2017072303.png)
* ![](/images/uploads/2018/02/2017072301.png)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
### 接下来是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 == -2250){
x = 0;//把ul修改成第一张图片
ul.style.left = x+"px";
}
if(x % 750 == 0){ //第一张图片进来
clearInterval(id); //关闭定时器
//开启定时器 隔半秒钟开启定时器
setTimeout(function(){
//500毫秒之后开启定时器,继续执行
id = setInterval(abc,10);
},500);//setTimeout 延时执行
}
}