{"id":565,"date":"2017-02-25T19:54:28","date_gmt":"2017-02-25T11:54:28","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=565"},"modified":"2017-02-25T23:15:15","modified_gmt":"2017-02-25T15:15:15","slug":"js%e5%8e%9f%e7%94%9f%e8%bd%ae%e6%92%ad-%e7%9b%b4%e6%8e%a5%e4%b8%8a%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=565","title":{"rendered":"Js\u539f\u751f\u8f6e\u64ad\u56fe"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0\" name=\"viewport\">\r\n    <title>Document<\/title>\r\n    <link rel=\"stylesheet\" href=\"\"\/>\r\n    <style>\r\n        *{\r\n            margin:0;\r\n            padding:0;\r\n            list-style:none;\r\n            text-decoration:none;\r\n            font-family: \"Microsoft YaHei\", Arial, Helvetica, sans-serifsans-serif;\r\n        }\r\n        body{\r\n                background:#eee;\r\n        }\r\n        #Bigbox{\r\n                width:720px;\r\n                height:420px;\r\n                border:1px solid #333;\r\n                margin:60px auto;\r\n        }\r\n        #Box{\r\n                width:700px;\r\n                height:400px;\r\n                position:relative;\r\n                overflow: hidden;\r\n                top:10px;\r\n                left:10px;\r\n        }\r\n        #Ul{\r\n                height:400px;\r\n                position:absolute;\r\n                top:0;\r\n                left:0;\r\n        }\r\n        #Ul li{\r\n                width:700px;\r\n                height:400px;\r\n                float:left;\r\n        }\r\n        #Left{\r\n                width:60px;\r\n                height:50px;\r\n                border-radius:30%;\r\n                background:rgba(96,96,96,.5);\r\n                position:absolute;\r\n                top:50%;\r\n                left:0;\r\n                margin-top:-25px;\r\n                color:#fff;\r\n                line-height:50px;\r\n                text-align:center;\r\n                cursor:pointer;\r\n                font-size:20px;\r\n                display:none;\r\n        }\r\n        #Right{\r\n                width:60px;\r\n                height:50px;\r\n                border-radius:30%;\r\n                background:rgba(96,96,96,.5);\r\n                position:absolute;\r\n                top:50%;\r\n                right:0;\r\n                margin-top:-25px;\r\n                color:#fff;\r\n                line-height:50px;\r\n                text-align:center;\r\n                cursor:pointer;\r\n                font-size:20px;\r\n                display:none;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"Bigbox\">\r\n    <div id=\"Box\">\r\n        <ul id=\"Ul\">\r\n            <li>\r\n                <img src=\"img\/1.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n            <li>\r\n                <img src=\"img\/2.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n            <li>\r\n                <img src=\"img\/3.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n            <li>\r\n                <img src=\"img\/4.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n            <li>\r\n                <img src=\"img\/5.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n            <li>\r\n                <img src=\"img\/6.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n            <li>\r\n                <img src=\"img\/7.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n            <li>\r\n                <img src=\"img\/8.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n            <li>\r\n                <img src=\"img\/9.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n            <li>\r\n                <img src=\"img\/10.jpg\" width=\"100%\" height=\"100%\">\r\n            <\/li>\r\n        <\/ul>\r\n        <div id=\"Left\" onselectstart=\"return false\">\u5de6<\/div>\r\n        <div id=\"Right\" onselectstart=\"return false\">\u53f3<\/div>\r\n    <\/div>\r\n<\/div>\r\n<script>\r\n    window.onload = function(){\r\n         var n = 0;\r\n         var timer = null;\r\n         var timer1 = null;\r\n         var timer2 = null;\r\n         var timer3 = null;\r\n         var oDiv = document.getElementById('Box')\r\n         var oUl = document.getElementById('Ul')\r\n         var oLi = oUl.getElementsByTagName('li')\r\n         \/\/\u83b7\u53d6div\u5bbd\u5ea6\r\n         var oDivWidth = getStyle(oDiv,'width').split('px')[0] \/\/\u590d\u5236oUl\u7684innerHTML\r\n          oUl.innerHTML+= oUl.innerHTML\r\n          \/\/\u8bbe\u7f6eul\u5bbd\u5ea6\r\n         oUl.style.width = oLi.length*oDivWidth+'px'\r\n         \/\/\u83b7\u53d6ul\u5bbd\u5ea6\r\n         var oUlWidth = getStyle(oUl,'width').split('px')[0] \/\/\u5c01\u88c5\u83b7\u53d6\u975e\u884c\u95f4\u6837\u5f0f\u51fd\u6570\r\n        function getStyle(obj,sName){\r\n            if(obj.currentStyle){\r\n                return obj.currentStyle[sName];\r\n            }else{\r\n                return getComputedStyle(obj,false)[sName];\r\n            }\r\n        }\r\n        \/\/\u6267\u884c\u51fd\u6570\r\n        clearInterval(timer3)\r\n        timer3 = setInterval(function(){\r\n            Run()\r\n        },2000)\r\n        \/\/\u5c01\u88c5\u8fd0\u52a8\u51fd\u6570\r\n        function Run(){\r\n            clearInterval(timer)\r\n            timer = setInterval(function(){\r\n                n-=20;\r\n                oUl.style.left = n+'px'\r\n                if(n%oDivWidth==0){\r\n                    clearInterval(timer3)\r\n                    clearInterval(timer)\r\n                    clearInterval(timer1)\r\n                    timer1 = setTimeout(function(){\r\n                        Run()\r\n                    },2000)\r\n                }\r\n                Wif(n<=-oUlWidth\/2){\r\n                    oUl.style.left = 0;\r\n                    n=0;\r\n                    clearInterval(timer3)\r\n                    clearInterval(timer)\r\n                    clearInterval(timer1)\r\n                    timer1 = setTimeout(function(){\r\n                            Run()\r\n                    },2000)\r\n                }\r\n            },30)        \r\n        }\r\n        \/\/\u9f20\u6807\u79fb\u5165\u505c\u6b62\u6eda\u52a8\r\n        oDiv.onmouseover = function(){\r\n            Left.style.display = 'block'\r\n            Right.style.display = 'block'\r\n            clearInterval(timer3)\r\n            clearInterval(timer2)\r\n            timer2 = setInterval(function(){\r\n                if(n%oDivWidth==0){\r\n                    clearInterval(timer)\r\n                    clearInterval(timer1)\r\n                }\r\n            },30)\r\n                \r\n        }\r\n        \/\/\u9f20\u6807\u79fb\u51fa\u7ee7\u7eed\u6267\u884c\r\n        oDiv.onmouseout = function(){\r\n            Left.style.display = 'none'\r\n            Right.style.display = 'none'\r\n            clearInterval(timer3)\r\n            clearInterval(timer2)\r\n            clearInterval(timer1)\r\n            timer1 = setTimeout(function(){\r\n                Run()\r\n            },2000)\r\n        }\r\n        \/\/\u5411\u5de6\r\n        Left.onclick = function(){\r\n            \/\/\u6e05\u9664\u6240\u6709\u5b9a\u65f6\u5668\r\n            clearInterval(timer)\r\n            clearInterval(timer1)\r\n            clearInterval(timer2)\r\n            clearInterval(timer3)\r\n            timer = setInterval(function(){\r\n                n-=50;\r\n                oUl.style.left = n+'px'\r\n                if(n%oDivWidth==0){\r\n                    clearInterval(timer)\r\n                }\r\n                if(n<=-oUlWidth\/2){\r\n                    oUl.style.left = 0;\r\n                    n=0;\r\n                }\r\n            },30)\r\n        }\r\n        \/\/\u5411\u53f3\r\n        Right.onclick = function(){\r\n            clearInterval(timer)\r\n            clearInterval(timer1)\r\n            clearInterval(timer2)\r\n            clearInterval(timer3)\r\n            if(n==0){\r\n                n=-oUlWidth\/2\r\n            }\r\n            clearInterval(timer)\r\n            timer = setInterval(function(){\r\n                n+=50;\r\n                oUl.style.left = n+'px'\r\n                if(n%oDivWidth==0){\r\n                    clearInterval(timer)\r\n                }              \r\n            },30)\r\n        }\r\n    }\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » Js\u539f\u751f\u8f6e\u64ad\u56fe<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <meta content=”width […]<\/p>\n","protected":false},"author":1,"featured_media":102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[150],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/565"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=565"}],"version-history":[{"count":4,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/565\/revisions"}],"predecessor-version":[{"id":573,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/565\/revisions\/573"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/102"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=565"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}