1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>超级经典一套鼠标控制左右滚动图片带自动翻滚</title> 
  6. <style type="text/css"> 
  7. <!--  
  8. .rollBox {  
  9.  background-color:#F5F5F5;  
  10.  border:1px solid #DDBFC7;  
  11.  clear:both;  
  12.  height:178px;  
  13.  margin:0;  
  14.  padding:10px 8px 0;  
  15.  width:944px;  
  16. }  
  17. .rollBox .LeftBotton {  
  18.  height:135px;  
  19.  width:22px;  
  20.  background:url(lnz_anniu.gif) no-repeat 0px 0;  
  21.  overflow:hidden;  
  22.  float:left;  
  23.  display:inline;  
  24.  margin:10px 0 0 0;  
  25.  cursor:pointer;  
  26. }  
  27. .rollBox .RightBotton {  
  28.  height:135px;  
  29.  width:22px;  
  30.  background:url(lnz_anniu.gif) no-repeat -22px 0;  
  31.  overflow:hidden;  
  32.  float:left;  
  33.  display:inline;  
  34.  margin:10px 0 0 0;  
  35.  cursor:pointer;  
  36. }  
  37. .rollBox .Cont {  
  38.  width:900px;  
  39.  overflow:hidden;  
  40.  float:left;  
  41. }  
  42. .rollBox .ScrCont {  
  43.  width:10000000px;  
  44. }  
  45. .rollBox .Cont .pic {  
  46.  width:150px;  
  47.  float:left;  
  48.  text-align:center;  
  49. }  
  50. .rollBox .Cont .pic img {  
  51.  padding:1px;  
  52.  background:#fff;  
  53.  border:0px solid #ccc;  
  54.  display:block;  
  55.  margin:0 auto;  
  56.  width:130px; height:130px;  
  57. }  
  58. .rollBox .Cont .pic p {  
  59.  line-height:21px;  
  60.  color:#505050;  
  61.  font-size:14px;  
  62.  width:120px; text-align:left;  
  63.  margin:0 auto;  
  64. }  
  65. .rollBox .Cont a:link, .rollBox .Cont a:visited {  
  66.  color:#626466;  
  67.  text-decoration:none;  
  68. }  
  69. .rollBox .Cont a:hover {  
  70.  color:#f00;  
  71.  text-decoration:underline;  
  72. }  
  73. .rollBox #List1, .rollBox #List2 {  
  74.  float:left;  
  75. }  
  76. --> 
  77. </style> 
  78. </head> 
  79. <body> 
  80. <div class="rollBox"> 
  81.   <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div> 
  82.   <div class="Cont" id="ISL_Cont"> 
  83.     <div class="ScrCont"> 
  84.       <div id="List1"> 
  85.         <!-- 图片列表 begin --> 
  86.         <div class="pic"><img src="http://zhoujian0610.blog.163.com/blog/1.jpg" /> 
  87.           <p>浙江省宁波市华源照明灯具厂</p> 
  88.         </div> 
  89.         <div class="pic"><img src="http://zhoujian0610.blog.163.com/blog/2.jpg" /> 
  90.           <p>宁波家家明灯具有限公司</p> 
  91.         </div> 
  92.         <div class="pic"><img src="http://zhoujian0610.blog.163.com/blog/3.jpg" /> 
  93.           <p>余姚市环湖灯具有限公司</p> 
  94.         </div> 
  95.         <div class="pic"><img src="http://zhoujian0610.blog.163.com/blog/4.jpg" /> 
  96.           <p>余姚市新时代照明灯具厂</p> 
  97.         </div> 
  98.         <div class="pic"><img src="http://zhoujian0610.blog.163.com/blog/1.jpg" /> 
  99.           <p>余姚市新世纪灯具有限公司</p> 
  100.         </div> 
  101.         <div class="pic"><img src="http://zhoujian0610.blog.163.com/blog/2.jpg" /> 
  102.           <p>杭州天伦化工1有限公司</p> 
  103.         </div> 
  104.         <div class="pic"><img src="http://zhoujian0610.blog.163.com/blog/2.jpg" /> 
  105.           <p>杭州天伦化2工有限公司</p> 
  106.         </div> 
  107.            <div class="pic"><img src="http://zhoujian0610.blog.163.com/blog/2.jpg" /> 
  108.           <p>杭州天伦化3工有限公司</p> 
  109.         </div> 
  110.              <div class="pic"><img src="http://zhoujian0610.blog.163.com/blog/2.jpg" /> 
  111.           <p>杭州天伦化4工有限公司</p> 
  112.         </div> 
  113.         <!-- 图片列表 end --> 
  114.       </div> 
  115.       <div id="List2"></div> 
  116.     </div> 
  117.   </div> 
  118.   <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div> 
  119. </div> 
  120. <script language="javascript" type="text/javascript"> 
  121. <!--//--><![CDATA[//><!--  
  122. //图片滚动列表 mengjia 070816  
  123. var Speed = 0.01; //速度(毫秒)  
  124. var Space = 5; //每次移动(px)  
  125. var PageWidth = 150; //翻页宽度  
  126. var fill = 0; //整体移位  
  127. var MoveLock = false;  
  128. var MoveTimeObj;  
  129. var Comp = 0;  
  130. var AutoPlayObj = null;  
  131. GetObj("List2").innerHTML = GetObj("List1").innerHTML;  
  132. GetObj('ISL_Cont').scrollLeft = fill;  
  133. GetObj("ISL_Cont").  
  134. GetObj("ISL_Cont").  
  135. AutoPlay();  
  136. function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}  
  137. function AutoPlay(){ //自动滚动  
  138.  clearInterval(AutoPlayObj);  
  139.  AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间  
  140. }  
  141. function ISL_GoUp(){ //上翻开始  
  142.  if(MoveLock) return;  
  143.  clearInterval(AutoPlayObj);  
  144.  MoveLock = true;  
  145.  MoveTimeObj = setInterval('ISL_ScrUp();',Speed);  
  146. }  
  147. function ISL_StopUp(){ //上翻停止  
  148.  clearInterval(MoveTimeObj);  
  149.  if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){  
  150.   Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);  
  151.   CompScr();  
  152.  }else{  
  153.   MoveLock = false;  
  154.  }  
  155.  AutoPlay();  
  156. }  
  157. function ISL_ScrUp(){ //上翻动作  
  158.  if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}  
  159.  GetObj('ISL_Cont').scrollLeft -= Space ;  
  160. }  
  161. function ISL_GoDown(){ //下翻  
  162.  clearInterval(MoveTimeObj);  
  163.  if(MoveLock) return;  
  164.  clearInterval(AutoPlayObj);  
  165.  MoveLock = true;  
  166.  ISL_ScrDown();  
  167.  MoveTimeObj = setInterval('ISL_ScrDown()',Speed);  
  168. }  
  169. function ISL_StopDown(){ //下翻停止  
  170.  clearInterval(MoveTimeObj);  
  171.  if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){  
  172.   Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;  
  173.   CompScr();  
  174.  }else{  
  175.   MoveLock = false;  
  176.  }  
  177.  AutoPlay();  
  178. }  
  179. function ISL_ScrDown(){ //下翻动作  
  180.  if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}  
  181.  GetObj('ISL_Cont').scrollLeft += Space ;  
  182. }  
  183. function CompScr(){  
  184.  var num;  
  185.  if(Comp == 0){MoveLock = false;return;}  
  186.  if(Comp < 0){ //上翻  
  187.   if(Comp < -Space){  
  188.    Comp += Space;  
  189.    num = Space;  
  190.   }else{  
  191.    num = -Comp;  
  192.    Comp = 0;  
  193.   }  
  194.   GetObj('ISL_Cont').scrollLeft -= num;  
  195.   setTimeout('CompScr()',Speed);  
  196.  }else{ //下翻  
  197.   if(Comp > Space){  
  198.    Comp -= Space;  
  199.    num = Space;  
  200.   }else{  
  201.    num = Comp;  
  202.    Comp = 0;  
  203.   }  
  204.   GetObj('ISL_Cont').scrollLeft += num;  
  205.   setTimeout('CompScr()',Speed);  
  206.  }  
  207. }  
  208. //--><!]]> 
  209. </script> 
  210. </body> 
  211. </html>