js 轮播原理

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                position: relative;
            }
            .box1{
                height: 100px;width: 100px;background-image: url(../../img/1.jpeg);position:absolute;top: 100px;left: 500px;
            }
            .box2{
                height: 100px;width: 100px;background-image: url(../../css3/images/1.jpg);position:absolute;top: 80px;left: 620px;
            }
            .box3{
                height: 100px;width: 100px;background-image: url(../../css3/images/2.jpg);position:absolute;top: 100px;left:740px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
            var oInput = document.getElementsByTagName('input');
            var oDiv   = document.getElementsByTagName('div');
            
            var arr=[];
            for(var i=0;i<oDiv.length;i++){
                //使用getStyle函数获取内联样式中的left,top,保存为二维函数
                arr.push( [getStyle(oDiv[i],'left'),getStyle(oDiv[i],'top')]);
                
            }
            //点击右按钮图片向右面转换
            oInput[1].onclick = function(){
                //将arr[0]添加到函数的最后面，将函数的第一个元素删除
                arr.push(arr[0]);
                arr.shift();
                
                for (var i=0;i<oDiv.length;i++) {
                    oDiv[i].style.left = arr[i][0];
                    oDiv[i].style.top = arr[i][1];
                }
            }
            //点击左按钮图片向左面转换 
            oInput[0].onclick = function(){
                //在数组头部添加一个元素，删除数组最后一个元素
                arr.unshift(arr[arr.length-1]);
                arr.pop();
                
                for (var i=0;i<oDiv.length;i++) {
                    oDiv[i].style.left = arr[i][0];
                    oDiv[i].style.top = arr[i][1];
                }
                console.log(arr);
            }
            //每隔五秒图片移动一下
            function changeStyle(){
                
                arr.push(arr[0]);
                arr.shift();
                for(var i=0;i<oDiv.length;i++){
                    oDiv[i].style.left = arr[i][0];
                    oDiv[i].style.top = arr[i][1];
                }
                    
            }
            setInterval(changeStyle,5000);
            //getStyle函数是js的style属性可以获得html标签的样式，但是不能获取非行间样式。
            function getStyle(obj,attr){
                if(obj.currentStyle){//ie下
                    return obj.currentStyle[attr];
                }else{//ff下
                    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>

<head><meta charset="UTF-8"><title></title><style>body{position: relative;}.box1{height: 100px;width: 100px;background-image: url(../../img/1.jpeg);position:absolute;top: 100px;left: 500px;}.box2{height: 100px;width: 100px;background-image: url(../../css3/images/1.jpg);position:absolute;top: 80px;left: 620px;}.box3{height: 100px;width: 100px;background-image: url(../../css3/images/2.jpg);position:absolute;top: 100px;left:740px;}</style><script type="text/javascript">window.onload=function(){var oInput = document.getElementsByTagName('input');var oDiv = document.getElementsByTagName('div');var arr=[];for(var i=0;i<oDiv.length;i++){//使用getStyle函数获取内联样式中的left,top,保存为二维函数arr.push( [getStyle(oDiv[i],'left'),getStyle(oDiv[i],'top')]);}//点击右按钮图片向右面转换oInput[1].onclick = function(){//将arr[0]添加到函数的最后面，将函数的第一个元素删除arr.push(arr[0]);arr.shift();for (var i=0;i<oDiv.length;i++) {oDiv[i].style.left = arr[i][0];oDiv[i].style.top = arr[i][1];}}//点击左按钮图片向左面转换 oInput[0].onclick = function(){//在数组头部添加一个元素，删除数组最后一个元素arr.unshift(arr[arr.length-1]);arr.pop();for (var i=0;i<oDiv.length;i++) {oDiv[i].style.left = arr[i][0];oDiv[i].style.top = arr[i][1];}console.log(arr);}//每隔五秒图片移动一下function changeStyle(){arr.push(arr[0]);arr.shift();for(var i=0;i<oDiv.length;i++){oDiv[i].style.left = arr[i][0];oDiv[i].style.top = arr[i][1];}}setInterval(changeStyle,5000);//getStyle函数是js的style属性可以获得html标签的样式，但是不能获取非行间样式。function getStyle(obj,attr){if(obj.currentStyle){//ie下return obj.currentStyle[attr];}else{//ff下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>

猜你喜欢