| 今天给大家分享一个用原生JS实现的呼吸轮播图，效果如下： 
以下是代码实现，欢迎大家复制粘贴。 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>原生JS实现呼吸轮播图</title> <style> ul { margin: 0; padding-left: 0; } li { list-style: none; } img { border: none; } #main { width: 280px; height: 330px; overflow: hidden; position: relative; margin: 20px auto 0 auto; } #main ul { position: absolute; left: 0; } #main ul li { width: 280px; height: 330px; float: left; position: absolute; filter: alpha(opacity=0); opacity: 0; } #btn { line-height: 14px; text-align: center; background: #eeeeee; width: 280px; margin: 10px auto 0 auto; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } #btn a { display: inline-block; width: 14px; height: 14px; text-decoration: none; line-height: 12px; text-align: center; border-radius: 7px; } #btn a.index { background-color: #ccc; } #btn a.active { background-color: red; } </style> <script type="text/javascript" src="js/move.js"></script> <script> window.onload = function () { var oMain = document.getElementById('main'); var oUl = oMain.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var oBtn = document.getElementById('btn'); var aA = oBtn.getElementsByTagName('a'); var iNow = 1; var iNow2 = 1; var bBtn = true; var num = 3; var timer = null; oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px'; aA[0].onclick = function () { if (bBtn) { clearInterval(timer); timer = setInterval(autoPlay, 3000); for (var i = 0; i < aLi.length; i++) { aLi[i].style.position = 'relative'; aLi[i].style.filter = 'alpha(opacity=100)'; aLi[i].style.opacity = 1; } oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px'; if (iNow == 1) { iNow = aLi.length; aLi[aLi.length - 1].style.position = 'relative'; aLi[aLi.length - 1].style.left = -aLi.length * aLi[0].offsetWidth + 'px'; } else { iNow--; } iNow2--; toRun(); bBtn = false; } }; aA[aA.length - 1].onclick = function () { if (bBtn) { clearInterval(timer); timer = setInterval(autoPlay, 3000); for (var i = 0; i < aLi.length; i++) { aLi[i].style.position = 'relative'; aLi[i].style.filter = 'alpha(opacity=100)'; aLi[i].style.opacity = 1; } oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px'; if (iNow == aLi.length) { iNow = 1; aLi[0].style.position = 'relative'; aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px'; } else { iNow++; } iNow2++; toRun(); bBtn = false; } }; for (var i = 1; i < aA.length - 1; i++) { aA[i].index = i; aA[i].onclick = function () { clearInterval(timer); timer = setInterval(autoPlay, 3000); iNow = this.index; iNow2 = this.index; toShow(); }; }; function toRun() { for (var i = 1; i < aA.length - 1; i++) { aA[i].className = 'index'; } aA[iNow].className = 'active'; startMove(oUl, { left: -(iNow2 - 1) * aLi[0].offsetWidth }, function () { if (iNow == 1) { aLi[0].style.position = 'relative'; aLi[0].style.left = 0; oUl.style.left = 0; iNow2 = 1; } else if (iNow == aLi.length) { aLi[aLi.length - 1].style.position = 'relative'; aLi[aLi.length - 1].style.left = 0; oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px'; iNow2 = aLi.length; } for (var i = 0; i < aLi.length; i++) { aLi[i].style.position = 'absolute'; aLi[i].style.filter = 'alpha(opacity=0)'; aLi[i].style.opacity = 0; } oUl.style.left = 0; aLi[iNow2 - 1].style.zIndex = num++; aLi[iNow2 - 1].style.filter = 'alpha(opacity=100)'; aLi[iNow2 - 1].style.opacity = 1; bBtn = true; }); }; function toShow() { for (var i = 1; i < aA.length - 1; i++) { aA[i].className = 'index'; } for (var i = 0; i < aLi.length; i++) { startMove(aLi[i], { opacity: 0 }); } aA[iNow].className = 'active'; startMove(aLi[iNow - 1], { opacity: 100 }, function () { aLi[iNow - 1].style.zIndex = num++; }); } timer = setInterval(autoPlay, 3000); function autoPlay() { if (iNow == aLi.length) { iNow = 1; iNow2 = 1; } else { iNow++; iNow2++; } toShow(); } }; </script></head> <body> <div id="main"> <ul> <li style="z-index:2; filter:alpha(opacity=100); opacity:1;"> <a> <img src="images/0.jpg" /> </a> </li> <li> <a> <img src="images/1.jpg" /> </a> </li> <li> <a> <img src="images/2.jpg" /> </a> </li> <li> <a> <img src="images/3.jpg" /> </a> </li> </ul> </div> <div id="btn"> <a class="prev" href="javascript:;"> <</a> <a class="active" href="javascript:;"> </a> <a class="index" href="javascript:;"></a> <a class="index" href="javascript:;"></a> <a class="index" href="javascript:;"></a> <a class="next" href="javascript:;">></a> </div></body> </html>以下是上面代码中引入的最重要的运动函数 move.js的代码： function startMove(obj, json, fnEnd) { clearInterval(obj.timer); obj.timer = setInterval(function () { doMove(obj, json, fnEnd); }, 30);}function doMove(obj, json, fnEnd) { var iCur = 0; var attr = null; var bStop = true; for (attr in json) { if (attr == 'opacity') { if (parseInt(100 * getStyle(obj, attr)) == 0) { iCur = parseInt(100 * getStyle(obj, attr)); } else { iCur = parseInt(100 * getStyle(obj, attr)) || 100; } } else { iCur = parseInt(getStyle(obj, attr)) || 0; } var iSpeed = (json[attr] - iCur) / 5; iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (json[attr] != iCur) { bStop = false; } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; obj.style.opacity = (iCur + iSpeed) / 100; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fnEnd) { fnEnd.call(obj); } }}function stopMove(obj) { clearInterval(obj.timer);}function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj)[attr]; }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
vue中的插槽详解
VUE在线调用阿里Iconfont图标库的方法 |
