自定义轮播图以及bug优化

一、源码

    
    
    
    
    


    
    

        

            

                

                

                

                

                

            
            


            
        

        

            <
            >
        
    

    
    

二、common.js

/*根据id获取元素对象*/
function my$(id){
    return document.getElementById(id);
}

/**
 * 设置任意元素的中间文本内容
 * @param {*} element 标签元素
 * @param {*} text    文本内容
 */
function setInnerText(element,text){
    if(typeof element.textContent === "undefined"){
        element.innerText = text;
    }else{
        element.textContent = text;
    }   
}

/**
 * 动画函数
 * 任意一个元素移动到指定的目标位置
 * @param {*} element 任意一个元素
 * @param {*} target  目标位置（number类型）
 */
function animate(element, target) {
    // 先清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        // 获取移动元素当前位置
        var current = element.offsetLeft;
        // 每次移动距离
        var step = 9;
        step = target > current ? step : -step;
        // 移动后的距离
        current +=step;
        // 判断是否到达目标位置
        if(Math.abs(target - current) > Math.abs(step)){
            element.style.left = current + "px";
        }else{
            clearInterval(element.timeId);
            element.style.left = target + "px";
        }
    }, 20);
}

三、图片

　　第一张图片：

　　　　

　　第二张图片：

　　　　

　　第三张图片：

　　　　

　　第四张图片：

　　　　

　　第五张图片：

　　　　

四、效果图

　　

 

 

 

 

 

 

　

转载于:https://www.cnblogs.com/mycnblogs-guoguo/p/11243868.html