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="width: 750px; height: 400px; position: relative; margin: 50px auto; overflow: hidden;">
15 <div id="dd1" style="background-image: url(img/1.jpg); background-size: contain; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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>
