图片切换基本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box1{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                left: 100px;
                top: 100px;
            }
            .box2{
                width: 100px;
                height: 100px;
                background: yellow;
                position: absolute;
                left: 250px;
                top: 50px;
            }
            .box3{
                width: 100px;
                height: 100px;
                background: blue;
                position: absolute;
                left: 400px;
                top: 100px;
            }
        </style>
        <script>
            window.onload=function(){
                var aInput=document.getElementsByTagName("input");
                var aDiv=document.getElementsByTagName("div");
                
                var arr=[];
                for(var i=0;i<aDiv.length;i++){
                    arr.push([getStyle(aDiv[i],'left'),getStyle(aDiv[i],'top')]);
                }
                aInput[0].onclick=function(){
                    arr.push(arr[0]);
                    arr.shift();
                    for(var i=0;i<aDiv.length;i++){
                        aDiv[i].style.left=arr[i][0];
                        aDiv[i].style.top=arr[i][1];
                        
                    }
                }
                aInput[1].onclick=function(){
                    arr.unshift(arr[arr.length-1]);
                    arr.pop();
                    for(var i=0;i<aDiv.length;i++){
                        aDiv[i].style.left=arr[i][0];
                        aDiv[i].style.top=arr[i][1];
                        
                    }
                }
                function getStyle(obj,attr){
                    if(obj.currentStyle){
                        return obj.currentStyle[attr];
                    }else{
                        return getComputedStyle(obj,false)[attr];
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="←" />
        <input type="button" value="→" />
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>
猜你喜欢
