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