一个兼容大多数浏览器 的 图片滚动的js 

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3  <head>
 4   <title> New Document </title>
 5   <meta name="Generator" content="EditPlus">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <style>
10   /*scroll图片滚动*/
11 .scroll{ width:950px; height:190px; background:url(../images/title_03.gif) no-repeat left top;}
12 .s_t{ font-size:14px; font-weight:bold; line-height:35px; color:#303030; text-indent:15px;}
13 .demo{ width:948px; height:155px; border: 1px solid #d6e3ec; border-top:none;}
14 #demoa { background: #FFF; height:145px; overflow:hidden;  width: 915px; margin-left:14px; padding-top:10px;} 
15 #demoa ul{ margin-left:4px; float:left; text-align:center;}
16 #demoa ul li{ float:left; margin:0 5px;}
17 #demoa img { width:160px; height:125px; padding:5px; border: 1px solid #dddddd;}
18 #demoa img:hover{ cursor: default;} 
19 #indemoa {float: left;  width: 800%; } 
20 #demo1a {  float: left; } 
21 #demo2a {  float: left; }
22 
23   </style>
24  </head>
25 
26  <body>
27    <!--scroll-->
28         <div class="scroll">
29             <div class="s_t">团队风采</div>
30             <div class="demo">       
31             <div id="demoa">
32               <div id="indemoa">
33                 <div id="demo1a" style="height:146px; width:auto"> 
34                     <ul>
35                         <li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
36                         <li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
37                         <li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
38                         <li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
39                         <li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
40                     </ul>
41                 </div>
42                 <div id="demo2a"></div>
43               </div>
44             </div>
45          </div>
46           <script> 
47         <!-- 
48         var speed=20; //数字越大速度越慢 
49         var tab=document.getElementById("demoa"); 
50         var tab1=document.getElementById("demo1a"); 
51         var tab2=document.getElementById("demo2a"); 
52         tab2.innerHTML=tab1.innerHTML; 
53         function Marquee(){ 
54         if(tab2.offsetWidth-tab.scrollLeft<=0) 
55         tab.scrollLeft-=tab1.offsetWidth 
56         else{ 
57         tab.scrollLeft++; 
58         } 
59         } 
60         var MyMar=setInterval(Marquee,speed); 
61         tab.onmouseover=function() {clearInterval(MyMar)}; 
62         tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
63         --> 
64         </script>
65         </div>
66     <!--end scroll-->
67  </body>
68 </html>

 

posted @ 2013-05-23 15:28  Alanblog  阅读(183)  评论(0)    收藏  举报