JS效果：旋转木马

效果

个人博客新地址：→点我♪(＾∀＾●)ﾉ

实现原理

主要是图片的位置摆放问题，利用z-index，opacity，top，left。

核心代码为编写的位置JSON：

javascript
var json = [
{ // 0
width:400,
top:70,
left:50,
opacity:0.2,
zIndex:2
},
{ // 1
width:600,
top:120,
left:0,
opacity:0.8,
zIndex:3
},
{ // 2
width:800,
top:100,
left:200,
opacity:1,
zIndex:4
},
{ // 3
width:600,
top:120,
left:600,
opacity:0.8,
zIndex:3
},
{ //4
width:400,
top:70,
left:750,
opacity:0.2,
zIndex:2
}
];


布局

<div class="wrap">
            <div class="slider">
                <ul>
                    <li><img src="images/rotate/slidepic1.jpg" /></li>
                    <li><img src="images/rotate/slidepic2.jpg" /></li>
                    <li><img src="images/rotate/slidepic3.jpg" /></li>
                    <li><img src="images/rotate/slidepic4.jpg" /></li>
                    <li><img src="images/rotate/slidepic5.jpg" /></li>
                </ul>
                <div class="arrow">
                    <div class="prev" id="prev"></div>
                    <div class="next" id='next'></div>
                </div>
            </div>
        </div>

Css代码：

<style>
*{
    margin:0;
    padding:0;
}
.wrap{
    width: 1200px;
    margin:10px auto;
}
.slider{
    height: 500px;
    position: relative;
}
.slider li{
    list-style: none;
    position: absolute;
    left:200px;
    top:0;
}
.slider li img{
    width: 100%;
    display: block;
}
.arrow{
    opacity: 1;
}
.prev,.next{
    width: 76px;
    height: 112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(images/rotate/prev.png) no-repeat;
    z-index:99;
}
.next{
    right:0;
    background: url(images/rotate/next.png) no-repeat;
}
.prev{
    left:0;
}
</style>

JS实现

<script>
     var json = [
        {   //  0
            width:400,
            top:70,
            left:50,
            opacity:0.2,
            zIndex:2
        },
        {  // 1
            width:600,
            top:120,
            left:0,
            opacity:0.8,
            zIndex:3
        },
        {   // 2
            width:800,
            top:100,
            left:200,
            opacity:1,
            zIndex:4
        },
        {  // 3
            width:600,
            top:120,
            left:600,
            opacity:0.8,
            zIndex:3
        },
        {   //4
            width:400,
            top:70,
            left:750,
            opacity:0.2,
            zIndex:2
        }
    ];
    //根据json的内容把图片缓动到相应位置，同时缓动
    var liArr = document.getElementsByTagName('li');
    var next = document.getElementById('next');
    var prev = document.getElementById('prev');
    function move(){
        for(var i=0;i<liArr.length;i++){
            animation(liArr[i],json[i]);
        }
    }
    move()
    next.onclick = function(){
        var last = json.pop();
        json.unshift(last);
        move()
    }
    prev.onclick = function(){
        var first = json.shift();
        json.push(first);
        move();
    }
</script>