1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 * { 8 margin: 0px; 9 padding: 0px; 10 } 11 </style> 12 </head> 13 <body> 14 <div style=" 750px; height: 400px; position: relative; margin: 50px auto; overflow: hidden;"> 15 <div id="dd1" style="background-image: url(img/1.jpg); background-size: contain; 600px; height: 100%; position:absolute; float: left; left: 0%;transition:1s;" onmouseover="bian(1)"></div> 16 <div id="dd2" style="background-image: url(img/2.jpg); background-size: contain; 600px; height: 100%; position: absolute; float: left; left: 30px;transition:1s;" onmouseover="bian(2)"></div> 17 <div id="dd3" style="background-image: url(img/3.jpg); background-size: contain; 600px; height: 100%; position: absolute; float: left; left: 60px;transition:1s;" onmouseover="bian(3)"></div> 18 <div id="dd4" style="background-image: url(img/4.jpg); background-size: contain; 600px; height: 100%; position: absolute; float: left; left: 90px;transition:1s;" onmouseover="bian(4)"></div> 19 <div id="dd5" style="background-image: url(img/5.jpg); background-size: contain; 600px; height: 100%; position: absolute; float: left; left: 120px;transition:1s;" onmouseover="bian(5)"></div> 20 <div id="dd6" style="background-image: url(img/6.jpg); background-size: contain; 600px; height: 100%; position: absolute; float: left; left: 150px;transition:1s;" onmouseover="bian(6)"></div> 21 </div> 22 23 </body> 24 </html> 25 <script type="text/javascript"> 26 dd1 = document.getElementById("dd1"); 27 dd2 = document.getElementById("dd2"); 28 dd3 = document.getElementById("dd3"); 29 dd4 = document.getElementById("dd4"); 30 dd5 = document.getElementById("dd5"); 31 dd6 = document.getElementById("dd6"); 32 function bian(n) { 33 if (n == 1) 34 { 35 dd1.style.left = "0px"; 36 dd2.style.left = "600px"; 37 dd3.style.left = "630px"; 38 dd4.style.left = "660px"; 39 dd5.style.left = "690px"; 40 dd6.style.left = "720px"; 41 } 42 if (n == 2) { 43 dd1.style.left = "0px"; 44 dd2.style.left = "30px"; 45 dd3.style.left = "630px"; 46 dd4.style.left = "660px"; 47 dd5.style.left = "690px"; 48 dd6.style.left = "720px"; 49 } 50 if (n == 3) { 51 dd1.style.left = "0px"; 52 dd2.style.left = "30px"; 53 dd3.style.left = "60px"; 54 dd4.style.left = "660px"; 55 dd5.style.left = "690px"; 56 dd6.style.left = "720px"; 57 } 58 if (n == 4) { 59 dd1.style.left = "0px"; 60 dd2.style.left = "30px"; 61 dd3.style.left = "60px"; 62 dd4.style.left = "90px"; 63 dd5.style.left = "690px"; 64 dd6.style.left = "720px"; 65 } 66 if (n == 5) { 67 dd1.style.left = "0px"; 68 dd2.style.left = "30px"; 69 dd3.style.left = "60px"; 70 dd4.style.left = "90px"; 71 dd5.style.left = "120px"; 72 dd6.style.left = "720px"; 73 } 74 if (n == 6) { 75 dd1.style.left = "0px"; 76 dd2.style.left = "30px"; 77 dd3.style.left = "60px"; 78 dd4.style.left = "90px"; 79 dd5.style.left = "120px"; 80 dd6.style.left = "150px"; 81 } 82 } 83 </script>
