原生JS实现呼吸轮播图原生JS实现呼吸轮播图

今天给大家分享一个用原生JS实现的呼吸轮播图，效果如下：

以下是代码实现，欢迎大家复制粘贴。

原生JS实现呼吸轮播图 - 锐客网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; }

文章图片

文章图片

文章图片

文章图片

< >

【原生JS实现呼吸轮播图】以下是上面代码中引入的最重要的运动函数 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]; }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。