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 }
