1 <html>
2 <head>
3 <title>1</title>
4 <style type='text/css'>
5 ul{
6 margin:0px;
7 list-style-type:none;
8 }
9 #big .big_li{
10 float:left;
11 border:solid 1px green;
12 height:130px;
13 width:20px;
14 color:#aaaaaa;
15 font-weight:bold;
16 line-height:128px;
17 text-align:center;
18 }
19 #big #main_li{
20 width:600px;
21 border-width:1px 0px;
22 line-height:normal;
23 font-weight:normal;
24 text-align:left;
25 overflow:hidden;
26 }
27 #info_ul li{
28 float:left;
29 height:128px;
30 width:150px;
31 border:solid 0px red;
32 }
33 #info_ul li img{
34 border:solid 1px green;
35 width:130px;
36 height:108px;
37 margin-left:10px;
38 margin-top:10px;
39 }
40 #info_ul{
41 position:absolute;
42 left:0px;
43 top:0px;
44 width:2400px;
45 }
46 </style>
47 </head>
48 <body>
49 <ul id='big'>
50 <li class='big_li' onclick="fun('left');" onmouseover="this.style.backgroundColor='green';this.style.color='white';"
51 onmouseout="this.style.backgroundColor='white';this.style.color='#aaaaaa';">《</li>
52 <li id='main_li' class='big_li'>
53 <ul id='info_ul'>
54 <li><img src='' alt='波兰'/></li>
55 <li><img src='' alt='希腊'/></li>
56 <li><img src='' alt='俄罗斯'/></li>
57 <li><img src='' alt='捷克'/></li>
58 <li><img src='' alt='荷兰'/></li>
59 <li><img src='' alt='丹麦'/></li>
60 <li><img src='' alt='德国'/></li>
61 <li><img src='' alt='葡萄牙'/></li>
62 <li><img src='' alt='西班牙'/></li>
63 <li><img src='' alt='意大利'/></li>
64 <li><img src='' alt='爱尔兰'/></li>
65 <li><img src='' alt='克罗地亚'/></li>
66 <li><img src='' alt='乌克兰'/></li>
67 <li><img src='' alt='瑞典'/></li>
68 <li><img src='' alt='法国'/></li>
69 <li><img src='' alt='英格兰'/></li>
70 </ul>
71 </li>
72 <li class='big_li' onclick="fun('right');" onmouseover="this.style.backgroundColor='green';this.style.color='white';"
73 onmouseout="this.style.backgroundColor='white';this.style.color='#aaaaaa';">》</li>
74 </ul>
75 <script language='javascript'>
76 var obj=document.getElementById('info_ul');
77 var out;
78 var overleft;
79 var overright;
80 function fun(move_to){
81 if(move_to=='left'){
82 overleft=obj.offsetLeft-600;
83 if(overleft>=-1800){
84 out=window.setInterval("moveleft();",100);
85 }
86 }else if(move_to='right'){
87 overright=obj.offsetLeft+600;
88 if(overright<=0){
89 out=window.setInterval("moveright();",100);
90 }
91 }
92 }
93 function moveleft(){
94 if(obj.offsetLeft==overleft){
95 clearTimeout(out);
96 return;
97 }
98 obj.style.left=(obj.offsetLeft-50)+'px';
99 }
100 function moveright(){
101 if(obj.offsetLeft==overright){
102 clearTimeout(out);
103 return;
104 }
105 obj.style.left=(obj.offsetLeft+50)+'px';
106 }
107 </script>
108
109 </body>
110 </html>
