原生javascript之实战 轮播图

Posted 2021-11-26 yangpeixian

成品效果如下图所示：

因为博客园限制图片上传大小被我删了一些帧数，所以图片看起来会有一点卡，现实运行是不会的

 

搭建html和CSS结构

HTML代码如下：

 1 <div class="wrapper">
 2         <ul class="sliderPage">
 3             <li>
 4                 <img src="images/1.jpg">
 5             </li>
 6             <li>
 7                 <img src="images/2.jpg">
 8             </li>
 9             <li>
10                 <img src="images/3.jpg">
11             </li>
12             <li>
13                 <img src="images/1.jpg">
14             </li>
15         </ul>
16         <div class="btn leftBtn">&lt;</div>
17         <div class="btn rightBtn">&gt;</div>
18         <div class="sliderIndex">
19             <span class="active"></span>
20             <span></span>
21             <span></span>
22         </div>
23     </div>

CSS代码如下：

 1 * {
 2             padding: 0px;
 3             margin: 0px;
 4             list-style: none;
 5         }
 6 
 7         .wrapper {
 8             margin: 50px auto 0px;
 9             width: 480px;
10             height: 640px;
11             overflow: hidden;
12             position: relative;
13         }
14 
15         .wrapper .sliderPage {
16             height: 640px;
17             width: 2400px;
18             position: absolute;
19             left: 0px;
20             top: 0px;
21         }
22 
23         .wrapper .sliderPage li {
24             width: 480px;
25             height: 640px;
26             float: left;
27         }
28 
29         .wrapper .sliderPage li img {
30             width: 100%;
31             height: 100%;
32         }
33 
34         .wrapper .btn {
35             position: absolute;
36             top: 50%;
37             margin-top: -20px;
38             width: 40px;
39             height: 40px;
40             color: #fff;
41             background-color: #000;
42             text-align: center;
43             line-height: 40px;
44             opacity: 0.3;
45             cursor: pointer;
46         }
47 
48         .wrapper:hover .btn {
49             opacity: 0.7;
50         }
51 
52         .wrapper .leftBtn {
53             left: 15px;
54         }
55 
56         .wrapper .rightBtn {
57             right: 15px;
58         }
59 
60         .wrapper .sliderIndex {
61             position: absolute;
62             width: 100%;
63             bottom: 15px;
64             text-align: center;
65         }
66 
67         .wrapper .sliderIndex span {
68             display: inline-block;
69             width: 8px;
70             height: 8px;
71             background-color: #ccc;
72             border-radius: 50%;
73             margin-right: 10px;
74             cursor: pointer;
75         }
76 
77         .wrapper .sliderIndex .active {
78             background-color: #f40;
79         }

 

搭建好后的效果如下：

 传入（调用写好的运动函数）

 

 1 //获取样式 
 2         function getStyle(dom, attr) {
 3             if (window.getComputedStyle) {
 4                 return window.getComputedStyle(dom, null)[attr];
 5             } else {
 6                 return dom.currentStyle[attr];
 7             }
 8         }
 9 
10         //运动函数
11         function startMove(dom, attr, func) {
12             clearInterval(dom.timer);
13             var iSpeed = null, //速度
14                 iCur = null;  //当前值
15             dom.timer = setInterval(function () {
16                 for (var i in attr) {
17                     if (i == ‘opacity‘) { //判断是否为 透明 属性，是的话，特殊处理；
18                         iCur = parseFloat(getStyle(dom, i)) * 100;
19                     } else {
20                         iCur = parseInt(getStyle(dom, i));
21                     }
22                     iSpeed = (attr[i] - iCur) / 7; 
23                     iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
24 
25                     if (i == ‘opacity‘) {
26                         dom.style.opacity = (iCur + iSpeed) / 100;
27                     } else {
28                         dom.style[i] = iCur + iSpeed + ‘px‘;
29                     }
30                     if (iCur == attr[i]) {
31                         clearInterval(dom.timer);
32                         func();
33                     }
34                 }
35             }, 30)
36         }

 

 

 

 

 

开始写轮播图代码

　　

 1         var timer = null;
 2         var sliderPage = document.getElementsByClassName(‘sliderPage‘)[0];
 3         var moveWidth = sliderPage.children[0].offsetWidth;   //sliderPage的子节点第n位的width等于movewidth
 4         var num = sliderPage.children.length - 1;  //li的长度减去1，相当于4-1=3；刚好到了第三张也就是最后一张
 5         var leftBtn = document.getElementsByClassName(‘leftBtn‘)[0]; // 获取左按钮事件
 6         var rightBtn = document.getElementsByClassName(‘rightBtn‘)[0];    //获取右按钮事件
 7         var lock = true;  //设置一个锁使定时器不发生冲突，true的时候可以进入，false就把锁锁上；
 8                           //相当于一个厕所，很多人在排队， 没进入前等于true，第一个进去之后把锁锁上(也就是等于false)这样别人就进不去，
 9                           //出来的时候把锁打开(也就是等于true)方便下一个进入
10 
11         var index = 0; //小圆点初始值等于0 
12         var oSpanArray = document.getElementsByClassName(‘sliderIndex‘)[0].getElementsByTagName(‘span‘);//选出sliderIndex下面的所有span标签
13 
14 
15         // 点击向左
16         leftBtn.onclick = function () {
17             autoMove(‘right->left‘);   //当点击leftBtn的时候传入‘right->left‘这个实参
18         }
19 
20 
21 
22         // 点击向右
23         rightBtn.onclick = function () {
24             autoMove(‘left->right‘);   //当点击rightBtn的时候传入‘left->right‘这个实参
25         }
26 
27 
28         //点击小圆点跳转至相应的图片和小圆点位置
29         for (var i = 0; i < oSpanArray.length; i++) {   //先循环拿到3个span标签，也就是每个小圆点的位置
30             (function (myIndex) {
31                 oSpanArray[i].onclick = function () { //给每一个小圆点注册一个点击事件
32                     lock = false;  //点击后关闭锁，防止没执行完再次运行点击事件
33                     clearInterval(timer); //清理定时器，防止没执行完再次开启定时器
34                     index = myIndex; //myIndex和i形参实参相统一，myIndex付给index
35                     startMove(sliderPage,{ left: - index * moveWidth }, //执行函数让sliderPage(也就是ul)移动
36                                                                         
37                               function () { //再执行回调函数
38                                 lock = true; //执行完再次开启锁，方便下次开启点击事件
39                                 timer = setInterval(autoMove, 1500); //开启定时器，让图片继续运动
40                                 changeIndex(index); //执行小圆点函数，让小圆点每次点击同步
41                     })
42                 }
43             })(i)
44         }
45         
46         function autoMove(dierction) {  // 函数形参传入dierction
47 
48             if (lock) {  //lock = true时进入判断
49                 lock = false;   //进来后等于false，判断之后再次开启锁
50                 clearInterval(timer);  // 每次进入autoMove函数的时候立即关闭定时器，执行下面代码之后再次开启定时器。
51                                         // 相当于执行一次轮播一张图片之后再次开启一次定时器，再次轮播一张图片，无限循环。
52                 if (!dierction || dierction == ‘left->right‘) {     //不传入参数时dierction等于undefined !undfined时等于true，进入if语句。    
53                                                                     //点击左右函数的时候传入实参
54                     index++; //小圆点位置每次加1
55                     startMove(sliderPage,{ left: sliderPage.offsetLeft - moveWidth },  //执行函数startMove,sliderPage里面left当前值减去li的宽度，所以图片移动
56                              function () {  //再执行回调函数
57                                 if (parseInt(getStyle(sliderPage, ‘left‘)) == -num * moveWidth) {  // 判断当前left的值是否等于最后一个，也就是到了最后一张图片
58                                     index = 0; // 当到了最后一张的时候，小圆点跳转到第一张，小圆点下角标为0，也就是等于第一张图片。
59                                     sliderPage.style.left = ‘0px‘;  // 如果等于到了最后一张图片的话，就当前left值等于0。 === 回到第一张图片
60                                 }
61                                 timer = setInterval(autoMove, 1500);  // 每次执行结束之后再次开启定时器
62                                 lock = true; //出去前等于true，方便下次进入，使定时器不会发生冲突同时运行多个定时器
63                                 changeIndex(index); //执行小圆点
64                         });
65 
66                 } else if (dierction == ‘right->left‘) { //当点击right按钮后实参传入‘right->left‘,进入if语句执行以下代码
67                     if (sliderPage.offsetLeft == 0) {  //如果开始执行的时候当前位置等于0
68                         sliderPage.style.left = - num * moveWidth + ‘px‘;  //那就把最后一张的位置付给他，让他跳转至最后一张
69                         index = num;   //如果刚开始的时候，当前位置等于0点击向left那么跳转到最后一张图片的位置，所以直接index的下角标直接等于最后一张的位置
70                     }
71                     index--;  //小圆点位置每次减1
72                     startMove(sliderPage,{ left: sliderPage.offsetLeft + moveWidth },
73                             function () {
74                             timer = setInterval(autoMove, 1500); //每次执行之后再次开启定时器
75                             lock = true; //出去前等于true，方便下次进入，使定时器不会发生冲突同时运行多个定时器
76                             changeIndex(index); //执行小圆点
77                         })
78                 }
79             }
80         }
81         function changeIndex(_index) {
82             for (var i = 0; i < oSpanArray.length; i++) {
83                 oSpanArray[i].className = ‘‘; //循环小圆点让每个位置的classname等于空
84             }
85             oSpanArray[_index].className = ‘active‘; //因为原始值是0，所以第一个有classname样式，每次index加数，下角标改变时classname也同步改变
86         }
87         timer = setInterval(autoMove, 1500); // 设置一个定时器，每1500毫秒运行一次autoMove函数