WEB机试题--原生JS特效的旋转木马

<style>
    /*初始化  reset*/
    *{
        margin: 0;
        padding: 0
    }
    ol, ul {
        list-style: none
    }
    a{
        text-decoration: none;
        outline: none;
        cursor: pointer;
    }

    img {
        border: 0;
        vertical-align: top;
    }

    .wrap {
        width: 1200px;
        margin: 10px auto;
    }
    .slide {
        height: 500px;
        position: relative;
    }
    .slide li {
        position: absolute;
        left: 200px;
        top: 0;
    }
    .slide li img {
        width: 100%;
    }

    .arrow {
        opacity: 0;
    }
    .prev,.next {
        width: 76px;
        height: 112px;
        position: absolute;
        top: 50%;
        margin-top: -56px;
        background: url(./images/prev.png) no-repeat;
        z-index: 99;
    }
    .next {
        right: 0;
        background-image: url(./images/next.png);
    }
</style>

<div class="wrap" id="wrap">
   <div class="slide" id="slide">
       <ul>
           <!--五张图片-->
           <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
           <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
           <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
           <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
           <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
       </ul>
       <!--左右切换按钮-->
       <div class="arrow" id="arrow">
           <a href="javascript:;" class="prev"></a>
           <a href="javascript:;" class="next"></a>
       </div>
   </div>
</div>

var arr = [
    {   //  1
        width:400,
        top:70,
        left:50,
        opacity:20,
        zIndex:2
    },
    {  // 2
        width:600,
        top:120,
        left:0,
        opacity:80,
        zIndex:3
    },
    {   // 3
        width:800,
        top:100,
        left:200,
        opacity:100,
        zIndex:4
    },
    {  // 4
        width:600,
        top:120,
        left:600,
        opacity:80,
        zIndex:3
    },
    {   //5
        width:400,
        top:70,
        left:750,
        opacity:20,
        zIndex:2
    }
];

window.onload=function () {
    // 1.获取元素  wrap(父元素)  arrow(左右切换) liArr
    var  wrap=document.getElementById("wrap");
    var  arrow=document.getElementById("arrow");
    var liArr=wrap.getElementsByTagName("li");
    //2.页面加载时 设置每个li的 不同样式
    //改进成缓动动画效果
    setStyle();
    // 3.wrap添加鼠标移入移出事件
    wrap.onmouseover=function () {
        //4.arrow通过透明度进行缓动动画的显示隐藏
        animate_multiple_slow(arrow,{
            opacity:100
        })
    };
    wrap.onmouseout=function () {
        animate_multiple_slow(arrow,{
            opacity:0
        })
    };
    //默认可以点击
    var boo=true;
    // 5.arrow添加点击事件
    arrow.children[0].onclick=function () {
        if(boo){
            //    左边按钮:删除数组第一位  拼接到最后一位
            arr.push(arr.shift());
            // console.log(arr);
            setStyle()
            boo=false;
        }
    };
    arrow.children[1].onclick=function () {
        if(boo){
            //    右边按钮 :删除数组最后一位元素 拼接到数组第一位
            arr.unshift(arr.pop());
            setStyle();
            boo=false;
        }
    };
    //把利用缓动动画的设置样式的代码封装成方法
    function setStyle() {
        for(var i=0;i<liArr.length;i++){
            animate_multiple_slow(liArr[i],arr[i],function () {
                //动画执行完毕  表示可以点点击
                boo=true;
            });
        }
    }
};

function animate_multiple_slow(ele,json,callback) {
    clearInterval(ele.timer);
    var step;
    var nowState;
    var boo;
    ele.timer=setInterval(function () {
        boo=true;
        for(var k in json){
            if(k=="opacity"){
                nowState=(parseFloat(getStyle(ele,k))||0)*100
            }else{
                nowState=parseInt(getStyle(ele,k)) || 0;
            }
            step=(json[k]-nowState)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            nowState=nowState+step;
            if(k=="opacity") {
//                    因为nowState先被我们乘以100了  现在除回来再设置
                ele.style[k] = nowState / 100;
//                    直接暴力点 设置两份  专门针对IE再设置一份
                ele.style.filter="alpha(opacity="+nowState+")";
            }else if(k=="zIndex" || k=="z-index"){
//                    如果是层级  直接设置最终目标即可
                ele.style[k]=json[k];
            }else{
                ele.style[k]=nowState+"px";
            }
//                console.log(1);
//             console.log(k+"---"+Math.abs(json[k]-nowState),Math.abs(step));
            if(Math.abs(json[k]-nowState)>Math.abs(step)){
                boo=false;
            }
        }
        if(boo){
            clearInterval(ele.timer);
//                拉到终点
            for (var k in json){
                if(k=="opacity"){
                    ele.style[k]=json[k]/100;
//                        直接再设置一份 针对IE的
                    ele.style.filter="alpha(opacity="+json[k]+")";

                }else if(k=="zIndex" || k=="z-index"){
                    ele.style[k]=json[k];
                }else{
                    ele.style[k]=json[k]+"px";
                }
            }
            if(typeof callback =="function"){
                callback();
            }
        }
    },25)
}

//关于元素内嵌或者外链样式的兼容性封装
function getStyle(ele,attrName) {
    if(window.getComputedStyle!=undefined){
        return window.getComputedStyle(ele)[attrName];
    }else{
        return ele.currentStyle[attrName];
    }
}