原生JS实现呼吸轮播图

今天给大家分享一个用原生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];
    }
}

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