JS 旋转木马轮播图和手风琴轮播图

手风琴轮播图
效果图展示

common.js

// 通过id名获取的元素
function my$(id) {
    return document.getElementById(id);
}

//通过标签名获取的元素
function ele$(element) {
    return document.getElementsByTagName(element);
}

//设置任意的标签中的任意文本内容
function setInnerText(element, text) {
    //判断是否支持这个属性
    if(typeof element.textContent == "undefined"){
        console.log(element.textContent+"====");
        //说明不支持
        element.innerText = text;
    }else{
        console.log(element.textContent);
        element.textContent = text;
    }
}

//封装 获取任意标签中的文本内容. 需要返回值
function getInnerText(element){
    if(element.textContent == undefined){
        return element.innerText;
    }else{
        return element.textContent;
    }
}

//封装一个获取任意一个父级元素的第一个子元素
function getFirstElementChild(parentElement) {
    if(parentElement.firstElementChild){
        //隐式布尔类型转换 --->true
        //如果支持
        return parentElement.firstElementChild;
    }else{
        return parentElement.firstChild;
    }
}


/*
   * @params : 对象  事件类型  回调函数
   * 作用: 为任意元素, 绑定任意的事件, 执行任意的处理函数
   * */
function addEventListener(element, type, fn) {
    //判断是不是支持这个方法   对象.方法名同样可以判断
    if(element.addEventListener){
        element.addEventListener(type, fn, false);
    }else if(element.attachEvent){
        element.attachEvent("on" + type, fn);
    }else{
        element["on"+type] = fn;
    }
}

//封装匀速动画函数--->任意一个元素移动到指定的目标位置
//@params : 元素  目标位置
function animate(element,target ) {
    //先清理定时器,防止多次绑定
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        //1.获取div当前的位置--->看成盒子当前的left值
        var current = element.offsetLeft;//number类型
        //2.div每一次移动多少像素 = 10 即步数
        var step = 10;
        //2.1判断往哪边移动
        step = current <= target ? step : -step;
        //3.每次移动后的距离
        current += step;
        ////4.判断剩余的步数是否大于 step
        if(Math.abs(target - current) > Math.abs(step)){
            element.style.left = current + "px";
        }else{
            clearInterval(element.timeId);
            element.style.left = target + "px";

        }
    },5)
}

//简化 :封装获取页面向上或者是向左卷曲出去的距离值
function getScroll() {
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft,
        top: window.pageYOffset || document.documentElement.scrollTop
    };
}

//封装变速动画
//@params : 元素  目标位置
function animateBian(element, target) {
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        //获取当前的元素的位置
        var current = element.offsetLeft;
        //设置移动的步数
        var step = (target - current)/10;
        //判断步数 > 0, 则向上取整 ,否则向下取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        //获取每次移动后的left值
        current += step;
        element.style.left = current + "px";
        if(current == target){
            clearInterval(element.timeId);
        }
        console.log("目标位置:" + target + ",每次移动的步数" + step +",当前位置:" + current );
    },10)
}

//获取任意一个元素的任意一个样式属性值
//@params ; element 元素  attr  属性值
function getStyle(element,attr){
    if (window.getComputedStyle) {
        return window.getComputedStyle(element,null)[attr];
    }else {
        return element.currentStyle[attr];
    }
}

//设置任意一个元素的任意一个样式属性值达到任意一个目标位置
//@params : element  --元素
//          sttr   --  属性
//          target --目标位置
function animateStyle(element,attr,target) {
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        var current = parseInt(getStyle(element,attr));
        var step = (target - current)/10;
        step >0 ? Math.ceil(step) : Math.floor(step);
        current += step;
        element.style[attr] = current +"px";
        if (current == target){
            clearInterval(element.timeId);
        }

    },50)
}

//设置任意一个元素的任意一个样式属性值达到任意一个目标位置
//@params : element  --元素
//          sttr   --  属性
function animateStyle(element,json) {
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        var flag = true;
        for (var attr in json) {
            var current = parseInt(getStyle(element,attr));
            var target = json[attr];
            var step = (target - current)/10;
            step =  step >0 ? Math.ceil(step) : Math.floor(step);
            current += step;
            element.style[attr] = current +"px";
            if (current != target){
                flag =false;
            }
        }
        if (flag ==true) {
            clearInterval(element.timeId);
        }
    },50)
}



//设置任意一个元素的任意一个样式属性值达到任意一个目标位置
//@params : element  --元素
//          json  --  属性
//          fn --回调函数
function animateStyle(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        var flag = true;
        for (var attr in json) {
            if(attr=="opacity"){
                var current = getStyle(element,attr)*100;
                var target = json[attr]*100;
                var step = (target - current)/10;
                step =  step >0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                element.style[attr] = current/100;
                if (current != target){
                    flag =false;
                }
            }else if(attr=="zIndex"){
                element.style[attr]=json[attr];
            }else {
                var current = parseInt(getStyle(element,attr));
                var target = json[attr];
                var step = (target - current)/10;
                step =  step >0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                element.style[attr] = current +"px";
                if (current != target){
                    flag =false;
                }
            }
        }
        if (flag ==true) {
            clearInterval(element.timeId);
            if (fn){
                fn();
            }
        }
    },50)
}

旋转木马轮播图
效果图展示