javascript:图片浏览器

最新推荐文章于 2024-01-08 11:16:39 发布

weixin_30377461

最新推荐文章于 2024-01-08 11:16:39 发布

阅读量62

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/51xzdy/archive/2012/06/17/2552386.html

版权

  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>