打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
原生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>

下边来进入主要部分

其实主要就是动画函数的封装以及对数组的改变

动画函数部分的注释,博主的上一篇博客有写:原生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 });
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
原生JS实现匀速图片轮播动画
image viewer(图片预览)
Elastic Image Slideshow with Thumbnail Previe...
继续分享一个我自己写的 ToolTip提示插件
九种原生js动画效果
jquery图片滚动
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服