用js实现轮播图

 1 <div id="box">
 2         <div class="inner">
 3             <ul>
 4                 <li><a href=""><img src="./images/1.jpg" alt=""></a></li>
 5                 <li><a href=""><img src="./images/2.jpg" alt=""></a></li>
 6                 <li><a href=""><img src="./images/3.jpg" alt=""></a></li>
 7                 <li><a href=""><img src="./images/4.jpg" alt=""></a></li>
 8                 <li><a href=""><img src="./images/5.jpg" alt=""></a></li>
 9             </ul>
10             <ol></ol>
11             <div id="circle">
12                 <span id="left" class="arr">&lt;</span>
13                 <span id="right" class="arr">&gt;</span>
14             </div>
15         </div>
16     </div>

 1 <style>
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6 
 7         #box {
 8             width: 700px;
 9             height: 400px;
10             padding: 5px;
11             margin: 200px auto;
12             border: 1px solid #ccc;
13         }
14 
15         .inner {
16             width: 100%;
17             height: 100%;
18             position: relative;
19             overflow: hidden;
20         }
21 
22         .inner ul {
23             width: 1000%;
24             height: 100%;
25             position: absolute;
26             top: 0;
27             left: 0;
28         }
29 
30         .inner li {
31             list-style: none;
32             float: left;
33         }
34 
35         .inner img {
36             width: 700px;
37             height: 400px;
38             vertical-align: top;
39         }
40 
41         ol {
42             position: absolute;
43             bottom: 20px;
44             left: 50%;
45             transform: translate(-50%, 0);
46         }
47 
48         ol li {
49             width: 12px;
50             height: 12px;
51             background-color: rgba(255, 255, 255, .3);
52             border-radius: 50%;
53             margin-right: 10px;
54             cursor: pointer;
55         }
56 
57         ol .current {
58             background-color: red;
59         }
60 
61         #circle {
62             display: none;
63         }
64 
65         #circle span:hover {
66             background-color: rgba(255, 0, 0, .7);
67         }
68 
69         #circle .arr {
70             position: absolute;
71             top: 50%;
72             transform: translate(0, -50%);
73             width: 50px;
74             height: 50px;
75             line-height: 50px;
76             text-align: center;
77             background-color: rgba(0, 0, 0, .5);
78             color: #fff;
79             font-size: 40px;
80             cursor: pointer;
81         }
82 
83         #left {
84             left: 0;
85         }
86 
87         #right {
88             right: 0;
89         }
90     </style>

  1 <script>
  2     //懒得写document.getElementById,所以声明了一个函数
  3     function byid(id) {
  4         return document.getElementById(id);
  5     }
  6 
  7     //动画函数，为下面的轮播图做铺垫
  8     function animate(element, target) {
  9         //首先先清除一遍定时器
 10         clearInterval(element.timeID);
 11 
 12         //通过对象属性的方式创建一个定时器，避免重复创建从而消耗内存
 13         element.timeID = setInterval(function () {
 14             //先获取目标元素当前的位置（及定位后的left值）
 15             var current = element.offsetLeft;
 16             //定义每次移动的距离
 17             var step = 15;
 18             //判断当前位置与目标位置的关系，如果当前位置小于目标位置走“正”距离，反之走“负”距离
 19             step = current < target ? step : -step;
 20             //得到即将到达的位置
 21             current += step;
 22             //判断如果目标位置与当前位置的差值大于每次移动的距离，及移动
 23             if (Math.abs(current - target) > Math.abs(step)) {
 24                 element.style.left = current + "px";
 25             } else { //判断如果目标位置与当前位置的差值小于每次移动的距离，清除定时器，并且直接到达目标位置
 26                 clearInterval(element.timeID);
 27                 element.style.left = target + "px";
 28             }
 29         }, 25);
 30     }
 31     //定义一个全局变量，为颜色同步做准备
 32     var num = 0;
 33     //获取最外层div
 34     var box = byid("box");
 35     //获取相框=id为inner的div
 36     var inner = box.children[0];
 37     //获取相框的长度
 38     var innerWidth = inner.offsetWidth;
 39     //获取ul
 40     var ulObjs = inner.children[0];
 41     //获取ul里的所有li
 42     var listObjs = ulObjs.children;
 43     //获取ol
 44     var olObjs = inner.children[1];
 45     //获取小圆点的父级元素
 46     var circle = byid("circle");
 47     //循环遍历
 48     for (var i = 0; i < listObjs.length; i++) {
 49         //创建li元素
 50         var liObjs = document.createElement("li");
 51         //将创建的元素添加到ol元素中
 52         olObjs.appendChild(liObjs);
 53         //给每个小圆点自定义属性，存储i值
 54         liObjs.setAttribute("index", i);
 55         //给第一个小圆点添加样式
 56         olObjs.children[0].className = "current";
 57         //给每个小圆点做鼠标进入事件
 58         liObjs.onmouseover = function () {
 59             //首先删除所有小圆点的类样式
 60             for (var j = 0; j < olObjs.children.length; j++) {
 61                 olObjs.children[j].removeAttribute("class");
 62             }
 63             //给当前做鼠标进入事件的小圆点添加样式
 64             this.className = "current";
 65             //获取当前圆点的自定义属性值，为下面的移动做铺垫
 66             num = this.getAttribute("index");
 67             //利用上面创建好函数通过移动ul的lifet值表现出移动效果
 68             animate(ulObjs, -innerWidth * num);
 69         };
 70     }
 71     //鼠标进入出现箭头
 72     box.onmouseover = function () {
 73         circle.style.display = "block";
 74         //清除定时器
 75         clearInterval(timeId);
 76     };
 77     //鼠标离开隐藏箭头
 78     box.onmouseout = function () {
 79         circle.style.display = "none";
 80         //重新赋值定时器
 81         timeId = setInterval(carousel, 1500);
 82     };
 83     //创建一个定时器实现自动播放效果
 84     var timeId = setInterval(carousel, 1500);
 85     //克隆ul里的最后一张图片，为实现无缝播放做铺垫
 86     ulObjs.appendChild(listObjs[0].cloneNode(true));
 87     //右箭头点击事件
 88     byid("right").onclick = carousel;
 89 
 90     function carousel() {
 91         //先判断索引值是否等于最大值（图片个数），如果是跳到第二张图片
 92         if (num == listObjs.length - 1) {
 93             num = 0;
 94             ulObjs.style.left = 0;
 95         }
 96         num++;
 97         //通过动画函数实现点击后图片移动效果
 98         animate(ulObjs, -innerWidth * num);
 99         //实现小圆点颜色同步
100         if (num == listObjs.length - 1) {
101             olObjs.children[olObjs.children.length - 1].className = "";
102             olObjs.children[0].className = "current";
103         } else {
104             for (var i = 0; i < olObjs.children.length; i++) {
105                 olObjs.children[i].removeAttribute("class");
106             }
107             olObjs.children[num].className = "current";
108             console.log(num);
109         }
110     }
111     //左箭头点击事件
112     byid("left").onclick = function () {
113         if (num == 0) {
114             num = ulObjs.children.length - 1;
115             ulObjs.style.left = -(ulObjs.children.length - 1) * innerWidth + "px";
116         }
117         num--;
118         animate(ulObjs, -innerWidth * num);
119         for (var i = 0; i < olObjs.children.length; i++) {
120             olObjs.children[i].removeAttribute("class");
121         }
122         olObjs.children[num].className = "current";
123         console.log(num);
124     };
125 </script>