原生轮播图代码

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 }
posted @ 2019-12-19 21:24  前端小混混  阅读(1293)  评论(0)    收藏  举报