1.html/css代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>轮播图</title>
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 }
13 .banenr-center {
14 width: 700px;
15 height: 300px;
16 /* border: 1px solid #000; */
17 margin: 0 auto;
18 overflow: hidden;
19 position: relative;
20 }
21 .center {
22 width: 2800px;
23 font-size: 50px;
24 text-align: center;
25 line-height: 300px;
26 position: absolute;
27 }
28 .center li {
29 list-style: none;
30 width: 700px;
31 height: 300px;
32 float: left;
33 }
34 .but-left {
35 position: absolute;
36 left: 0;
37 top: 140px;
38 width: 20px;
39 height: 35px;
40 display: none;
41 }
42 .but-right {
43 position: absolute;
44 right: 0;
45 top: 140px;
46 width: 20px;
47 height: 35px;
48 display: none;
49 }
50 div:hover span {
51 display: block;
52 }
53 .centers li {
54 list-style: none;
55 width: 8px;
56 height: 8px;
57 border: 1px solid #000;
58 border-radius: 50%;
59 float: left;
60 margin-left: 20px;
61 position: relative;
62 }
63 .centers {
64 position: absolute;
65 bottom: 20px;
66 left: 50%;
67 transform: translateX(-50%);
68 }
69 .active {
70 background: #fff;
71 }
72 </style>
73 </head>
74
75 <body>
76 <div class="banenr-center">
77
78 <ul class='center'>
79 <li style="background-color: blue;" id="one">1</li>
80 <li style="background-color: red;">2</li>
81 <li style="background-color:yellow;">3</li>
82 </ul>
83 <span class='but-left'><</span>
84 <span class='but-right'>></span>
85 <ul class="centers">
86 <li class="active"></li>
87 <li></li>
88 <li></li>
89 </ul>
90 </div>
91 <script src="./js/animation.js"></script>
92 <script src="./js/carousel.js"></script>
93 </body>
94
95 </html>
2.js代码animation代码
1 // 封装一个JS文件， 这个文件就是动画文件
2
3 /*
4 element：要移动的元素
5 targetVal：要移动的距离
6 speed：一步要移动距离
7 */
8
9 // 定义全局变量
10 var dsq;
11 function moveElement (element, targetVal, speed) {
12
13 // 一上来先清除上一个
14 window.clearInterval(dsq);
15
16 // 点击设置定时器
17 dsq = window.setInterval(function () {
18
19 // 每次点击都会启动定时器，当多次点击，多次启动，会有n个定时器提示控制元素移动
20 // 我们要想处理这个问题：保证页面只有一个定时器
21 // 每次点击要清除上一个定时器，再打开新的定时器
22
23 // 要想设置盒子移动，我们需要知道上一次盒子left的值，再加上10，最后赋值给盒子的left
24 // 获取盒子左距离
25 var leftVal = element.offsetLeft;
26 // 如果到达指定位置，我们要停止定时器继续运动
27 if (leftVal == targetVal) {
28 window.clearInterval(dsq);
29 return;
30 }
31
32 // 判断：如果不成倍数的移动，那么元素会左右晃动，原因是因为不够走，强制走就会大于，再小目标来回弹动
33 // 处理：如果不够继续移动一步，直接让元素到大目标既可
34 // 所以此时元素有两种，一种够移动一步，一种是不够走一步，不够走一步直接设置元素到达目标
35 if (Math.abs(targetVal - leftVal) < speed) { // 不够走一步
36 // 直接把元素设置到目标
37 element.style.left = targetVal + 'px';
38 } else {
39 // 够走一步
40 // 加10
41 if (targetVal > leftVal) { // 正方向
42 leftVal = leftVal + speed;
43 } else {
44 leftVal = leftVal - speed;
45 }
46
47 // 设置给盒子的left
48 element.style.left = leftVal + 'px';
49 }
50
51 },10);
52
53 }
3.js代码carousel代码
1 var banenrCenter = document.querySelector('.banenr-center');
2 var butLeft = document.querySelector('.but-left');
3 var burRight = document.querySelector('.but-right');
4 var center = document.querySelector('.center');
5 var lis = document.querySelectorAll('.centers li');
6 var width = banenrCenter.offsetWidth;
7 console.log(width);
8 var one = document.getElementById('one');
9 var index = 0;
10 var clone = one.cloneNode(true);
11 center.appendChild(clone);
12 //右滚动
13 burRight.onclick = function () {
14 if(index==0){
15 center.style.left = 0 + 'px';
16 }
17 lis[index].className = '';
18 index++;
19 distance = - index * width
20 moveElement(center,distance,10)
21 if (index == 3) {
22 index = 0;
23 }
24 // center.style.left = - index * width + 'px';
25 lis[index].className = 'active';
26 };
27 //左滚动
28 butLeft.onclick = function () {
29 lis[index].className = '';
30 index--;
31 distance = - index * width
32 moveElement(center,distance,10)
33 if (index < 0) {
34 index = 2
35 center.style.left = -2100 + 'px';
36 };
37 // center.style.left = - index * width + 'px';
38
39 lis[index].className = 'active';
40 };
41 //小点跟随
42 for (var i = 0; i < lis.length; i++) {
43 lis[i].xiabiao = i;
44 lis[i].onclick = function () {
45 lis[index].className = '';
46 index = this['xiabiao'];
47 // center.style.left = -index * width + 'px';
48 distance = - index * width
49 moveElement(center,distance,10)
50 lis[index].className = 'active';
51 }
52 }
53 //自动轮播
54 var auto = window.setInterval(function(){
55 burRight.onclick();
56 },2000);
57 banenrCenter.onmouseover = function(){
58 window.clearInterval(auto);
59 };
60 banenrCenter.onmouseout = function(){
61 auto = window.setInterval(function(){
62 burRight.onclick();
63 },2000);
64 }