Js-旋转木马

• HTML部分：

<div class="all"id=all>
    <ul id="oul">
        <li>![](../images/slidepic1.jpg)</li>
        <li>![](../images/slidepic2.jpg)</li>
        <li>![](../images/slidepic3.jpg)</li>
        <li>![](../images/slidepic4.jpg)</li>
        <li>![](../images/slidepic5.jpg)</li>
    </ul>
    <div class="bottom" id="bottom">
        <span class="left"></span>
        <span class="right"></span>
    </div>
</div>

• CSS部分：

 *{
       margin:0;
       padding:0;
       border:none;
       }
        .all{
            width: 1200px;
            height: 500px;
            margin: 150px auto;
            position: relative;
        }
        ul li {
            list-style: none;
            position: absolute;
            top:0;
            left:200px;
        }
        .bottom{
            opacity: 0;
        }
        .left,.right{
            position: absolute;
            width: 76px;
            height: 112px;
            top: 50%;
            margin-left:-38px;
            z-index: 99;
            cursor: pointer;
        }
        .left{
            left: 0;
            background: url("../images/prev.png");
        }
        .right{
            right: 0;
            background:url("../images/next.png");
        }

• JS部分：

 window.onload = function () {
        //获取标签
        var all = document.getElementById("all");
        var oul = document.getElementById("oul");
        var bottom = document.getElementById("bottom");
        var lis = oul.children;
        //触碰大盒子显示两个箭头
        all.onmouseover = function () {
            buffer(bottom,{opacity:1})
        }
        all.onmouseout = function () {
            buffer(bottom,{opacity:0.01})
        }
        //设置各个图片的对应位置
        var json = [
            {   //  1
                width:400,
                top:20,
                left:50,
                opacity:0.2,
                z:2
            },
            {  // 2
                width:600,
                top:70,
                left:0,
                opacity:0.8,
                z:3
            },
            {   // 3
                width:800,
                top:100,
                left:200,
                opacity:1,
                z:4
            },
            {  // 4
                width:600,
                top:70,
                left:600,
                opacity:0.8,
                z:3
            },
            {   //5
                width:400,
                top:20,
                left:750,
                opacity:0.2,
                z:2
            }
        ]
        //抽取函数设置各个图片的属性
        var flag = true;
        function change(){
            //遍历每个li取出每一个数据
            for(var i=0;i<lis.length;i++){
                var item = json[i];
      //确定图片的位置
                buffer(lis[i],{width:item.width,left:item.left,top:item.top,opacity:item.opacity,zIndex:item.z},function(){
                    flag = true;
                });
            }
        }
        change();
//点击span设置对应的动画变化
        for(var i = 0;i<bottom.children.length;i++){
            var mySpan = bottom.children[i];
            mySpan.onclick = function () {
                if(flag == true){
                    if(this.className == "left"){
                        json.push(json.shift());
                        flag = false;
                        change();
                    }else if(this.className == "right"){
                        json.unshift(json.pop());
                        flag = false;
                        change();
                    }
                }
            }
        }
    }