原生JS实现旋转木马轮播图特效
程序员文章站
2022-05-29 08:33:11
大概是这个亚子： 首先来简单布局一下（emm...随便弄一下吧，反正主要是用js来整的） 1 2 3 4 5
大概是这个亚子：
首先来简单布局一下（emm...随便弄一下吧，反正主要是用js来整的）
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 <script src="js/index.js"></script>
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 }
14 ul, li {
15 list-style: none;
16 }
17 .wrap {
18 margin: 0 auto;
19 width: 1050px;
20 }
21 .slider {
22 position: relative;
23 margin: 50px auto;
24 height: 400px;
25 }
26 .slider li {
27 position: absolute;
28 }
29 .slider li img {
30 width: 100%;
31 }
32 .slider .arrow-l,
33 .slider .arrow-r{
34 position: absolute;
35 top: 0;
36 display: none;
37 width: 80px;
38 height: 400px;
39 background-size: 80px;
40 cursor: pointer;
41 opacity: 0.8;
42 z-index: 99;
43 }
44 .arrow-r {
45 right: 80px;
46 background: url(img/next.png) no-repeat 0;
47 }
48 .arrow-l {
49 left: 80px;
50 background: url(img/prev.png) no-repeat 0;
51 }
52 </style>
53 </head>
54 <body>
55 <div class="wrap">
56 <div class="slider">
57 <ul>
58 <li><img src="img/img1.jpg" alt=""></li>
59 <li><img src="img/img2.jpg" alt=""></li>
60 <li><img src="img/img3.jpg" alt=""></li>
61 <li><img src="img/img4.jpg" alt=""></li>
62 <li><img src="img/img5.jpg" alt=""></li>
63 </ul>
64 <div class="arrows">
65 <i class="arrow arrow-l"></i>
66 <i class="arrow arrow-r"></i>
67 </div>
68 </div>
69 </div>
70 </body>
71 </html>
下边来进入主要部分
其实主要就是动画函数的封装以及对数组的改变
动画函数部分的注释，博主的上一篇博客有写：原生js实现动画函数的封装。这里就不重复啦~
将图片相关样式（大小、定位、透明度等）存放到arr数组里。
当用户点击左右箭头时，让数组进行相应变化（如果点击右箭头，就删除数组最后那个元素，把它添加到最前边；如果点击左箭头，就删除数组最前边那个元素，把它添加到最后边），改变完数组再调用一下move()函数（让图片轮播）
详细代码如下
1 window.addeventlistener("load", function() {
2 var arr = [
3 { // 1
4 width: 450,
5 top: 60,
6 left: 0,
7 opacity: 40,
8 zindex: 2
9 },
10 { // 2
11 width: 550,
12 top: 30,
13 left: 100,
14 opacity: 70,
15 zindex: 3
16 },
17 { // 3 中间图片
18 width: 650,
19 top: 0,
20 left: 200,
21 opacity: 100,
22 zindex: 4
23 },
24 { // 4
25 width: 550,
26 top: 30,
27 left: 400,
28 opacity: 70,
29 zindex: 3
30 },
31 { // 5
32 width: 450,
33 top: 60,
34 left: 600,
35 opacity: 40,
36 zindex: 2
37 }
38 ];
39 var slider = document.queryselector(".slider");
40 var lis = slider.queryselectorall("li");
41 var arrow_l = slider.queryselector(".arrow-l");
42 var arrow_r = slider.queryselector(".arrow-r");
43
44 // 鼠标移入移出箭头显示隐藏
45 slider.addeventlistener("mouseover", function() {
46 arrow_l.style.display = 'block';
47 arrow_r.style.display = 'block';
48 });
49 slider.addeventlistener("mouseout", function() {
50 arrow_l.style.display = 'none';
51 arrow_r.style.display = 'none';
52 });
53
54 var flag = true; // flag节流阀 为了解决点击过快而产生bug
55 move(); // 先调用一下，为了刚打开浏览器时渲染页面
56
57 // 点击左右箭头轮播图片
58 arrow_r.addeventlistener("click", function() {
59 if(flag) {
60 flag = false; // 关闭节流阀 等到动画结束了才能继续执行点击操作
61 arr.unshift(arr.pop()); // 将数组最后边的元素删除，添加到最前边
62 move(); // 轮播图片
63 }
64 });
65 arrow_l.addeventlistener("click", function() {
66 if(flag) {
67 flag = false;
68 arr.push(arr.shift()); // 将数组最前边的元素删除，添加到最后边
69 move();
70 }
71 });
72
73 // 让每个图片执行动画
74 function move() {
75 for(var i = 0; i < lis.length; i++) {
76 animate(lis[i], arr[i], function() {
77 flag = true; // 回调函数，当动画执行完 再把节流阀打开
78 });
79 }
80 }
81 // 动画函数
82 function animate(obj, json, callback) {
83 clearinterval(obj.timer);
84 obj.timer = setinterval(function() {
85 var bool = true;
86 for(var attr in json) {
87 var icur = 0;
88 if(attr == 'opacity') {
89 icur = math.round(parsefloat(getstyle(obj, attr)) * 100);
90 } else {
91 icur = parseint(getstyle(obj, attr));
92 }
93 var speed = (json[attr] - icur) / 10;
94 speed = speed > 0 ? math.ceil(speed) : math.floor(speed);
95 if(icur != json[attr]) {
96 bool = false;
97 }
98 if(attr == 'opacity') {
99 obj.style.filter = 'alpha(opacity = '+ (icur + speed) +')';
100 obj.style.opacity = (icur + speed) / 100;
101 } else if(attr == 'zindex') {
102 obj.style.zindex = json[attr];
103 } else {
104 obj.style[attr] = icur + speed + 'px';
105 }
106 }
107 if(bool) {
108 clearinterval(obj.timer);
109 callback && callback();
110 }
111 },15);
112 }
113 // 获取属性函数
114 function getstyle(obj, attr) {
115 if(obj.currentstyle){ //ie浏览器
116 return obj.currentstyle[attr];
117 }else{ //chrome、firefox等浏览器
118 return getcomputedstyle(obj,null)[attr];
119 }
120 }
121 });