原生JS实现旋转木马轮播图特效
轮播图图片展示：
首先来简单布局一下（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>
具体代码点击 https://github.com/sunyan1998/Some-demos （觉得不错右上角顺手点个☆Star哦~感谢O(∩_∩)O~）
里面有很多CSS3/JS/jQuery小例子哦，包括各种轮播图、电梯导航、封装的动画函数、todolist、登录模态框（可拖动）、购物车、点击换肤、密码显示隐藏、各种布局（bootstrap-flex-rem）等等......
下边来进入主要部分
其实主要就是动画函数的封装以及对数组的改变
动画函数部分的注释，博主的上一篇博客有写：原生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 });
