Posted By

dayu on 06/15/09


Tagged


Versions (?)

经典鼠标控制左右滚动,图片间隔无缝滚动,悬停滚动,图片控制左右滚动JavaScript代码


 / Published in: XHTML
 

URL: http://bbs.blueidea.com/thread-2849517-1-1.html

  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. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>超级经典一套鼠标控制左右滚动图片带自动翻滚</title>
  5. </head>
  6. <div class="rollBox">
  7. <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
  8. <div class="Cont" id="ISL_Cont">
  9. <div class="ScrCont">
  10. <div id="List1">
  11.  
  12.  
  13. <!-- 图片列表 begin -->
  14. <div class="pic">
  15. <a href="http://career.sina.com.cn/3/2007/0928/15.html" target="_blank"><img src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="109" height="87" alt="周宪环" /></a>
  16. <p><a href="http://career.sina.com.cn/3/2007/0928/15.html" target="_blank">周宪环</a></p>
  17. </div>
  18.  
  19. <div class="pic">
  20. <a href="http://career.sina.com.cn/3/2007/0928/16.html" target="_blank"><img src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="109" height="87" alt="周桢炜" /></a>
  21. <p><a href="http://career.sina.com.cn/3/2007/0928/16.html" target="_blank">周桢炜</a></p>
  22.  
  23. </div>
  24. <div class="pic">
  25. <a href="http://career.sina.com.cn/3/2007/0928/14.html" target="_blank"><img src="http://i2.sinaimg.cn/edu/deco/2007/0928/zhangying.jpg" width="109" height="87" alt="张颖" /></a>
  26. <p><a href="http://career.sina.com.cn/3/2007/0928/14.html" target="_blank">张颖</a></p>
  27. </div>
  28. <div class="pic">
  29. <a href="http://career.sina.com.cn/3/2007/0928/17.html" target="_blank"><img src="http://i3.sinaimg.cn/edu/deco/2007/0928/wangnaichao.jpg" width="109" height="87" alt="王乃超" /></a>
  30. <p><a href="http://career.sina.com.cn/3/2007/0928/17.html" target="_blank">王乃超</a></p>
  31.  
  32. </div>
  33. <div class="pic">
  34. <a href="http://career.sina.com.cn/3/2007/0928/19.html" target="_blank"><img src="http://i1.sinaimg.cn/edu/deco/2007/0928/xiewenxiu.jpg" width="109" height="87" alt="谢雯琇" /></a>
  35. <p><a href="http://career.sina.com.cn/3/2007/0928/19.html" target="_blank">谢雯琇</a></p>
  36. </div>
  37. <div class="pic">
  38. <a href="http://career.sina.com.cn/3/2007/0928/18.html" target="_blank"><img src="http://i1.sinaimg.cn/edu/deco/2007/0928/lvge.jpg" width="109" height="87" alt="吕铬" /></a>
  39. <p><a href="http://career.sina.com.cn/3/2007/0928/18.html" target="_blank">吕铬</a></p>
  40.  
  41. </div>
  42. <div class="pic">
  43. <a href="http://career.sina.com.cn/3/2007/0927/12.html" target="_blank"><img src="http://i2.sinaimg.cn/edu/deco/2007/0928/zhengru.jpg" width="109" height="87" alt="贾正如" /></a>
  44. <p><a href="http://career.sina.com.cn/3/2007/0927/12.html" target="_blank">贾正如</a></p>
  45. </div>
  46. <!-- 图片列表 end -->
  47.  
  48. </div>
  49. <div id="List2"></div>
  50. </div>
  51.  
  52. </div>
  53. <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
  54. </div>
  55. </div>
  56. <style type="text/css">
  57. <!--
  58. .rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;}
  59. .rollBox .LeftBotton{height:52px;width:19px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
  60. .rollBox .RightBotton{height:52px;width:20px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
  61. .rollBox .Cont{width:663px;overflow:hidden;float:left;}
  62. .rollBox .ScrCont{width:10000000px;}
  63. .rollBox .Cont .pic{width:132px;float:left;text-align:center;}
  64. .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
  65. .rollBox .Cont .pic p{line-height:26px;color:#505050;}
  66. .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
  67. .rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
  68. .rollBox #List1,.rollBox #List2{float:left;}
  69. -->
  70. <script language="javascript" type="text/javascript">
  71. <!--//--><![CDATA[//><!--
  72. //图片滚动列表 mengjia 070816
  73. var Speed = 10; //速度(毫秒)
  74. var Space = 5; //每次移动(px)
  75. var PageWidth = 132; //翻页宽度
  76. var fill = 0; //整体移位
  77. var MoveLock = false;
  78. var MoveTimeObj;
  79. var Comp = 0;
  80. var AutoPlayObj = null;
  81. GetObj("List2").innerHTML = GetObj("List1").innerHTML;
  82. GetObj('ISL_Cont').scrollLeft = fill;
  83. GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
  84. GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
  85. AutoPlay();
  86. function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
  87. function AutoPlay(){ //自动滚动
  88. clearInterval(AutoPlayObj);
  89. AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
  90. }
  91. function ISL_GoUp(){ //上翻开始
  92. if(MoveLock) return;
  93. clearInterval(AutoPlayObj);
  94. MoveLock = true;
  95. MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
  96. }
  97. function ISL_StopUp(){ //上翻停止
  98. clearInterval(MoveTimeObj);
  99. if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
  100. Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
  101. CompScr();
  102. }else{
  103. MoveLock = false;
  104. }
  105. AutoPlay();
  106. }
  107. function ISL_ScrUp(){ //上翻动作
  108. if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
  109. GetObj('ISL_Cont').scrollLeft -= Space ;
  110. }
  111. function ISL_GoDown(){ //下翻
  112. clearInterval(MoveTimeObj);
  113. if(MoveLock) return;
  114. clearInterval(AutoPlayObj);
  115. MoveLock = true;
  116. ISL_ScrDown();
  117. MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
  118. }
  119. function ISL_StopDown(){ //下翻停止
  120. clearInterval(MoveTimeObj);
  121. if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
  122. Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
  123. CompScr();
  124. }else{
  125. MoveLock = false;
  126. }
  127. AutoPlay();
  128. }
  129. function ISL_ScrDown(){ //下翻动作
  130. if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
  131. GetObj('ISL_Cont').scrollLeft += Space ;
  132. }
  133. function CompScr(){
  134. var num;
  135. if(Comp == 0){MoveLock = false;return;}
  136. if(Comp < 0){ //上翻
  137. if(Comp < -Space){
  138. Comp += Space;
  139. num = Space;
  140. }else{
  141. num = -Comp;
  142. Comp = 0;
  143. }
  144. GetObj('ISL_Cont').scrollLeft -= num;
  145. setTimeout('CompScr()',Speed);
  146. }else{ //下翻
  147. if(Comp > Space){
  148. Comp -= Space;
  149. num = Space;
  150. }else{
  151. num = Comp;
  152. Comp = 0;
  153. }
  154. GetObj('ISL_Cont').scrollLeft += num;
  155. setTimeout('CompScr()',Speed);
  156. }
  157. }
  158. //--><!]]>
  159. </body>
  160. </html>

Report this snippet  

You need to login to post a comment.