资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
超级经典一套鼠标控制左右滚动图片带自动翻滚
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>超级经典一套鼠标控制左右滚动图片带自动翻滚</title> </head> <body> <div class="rollBox"> <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div> <div class="Cont" id="ISL_Cont"> <div class="ScrCont"> <div id="List1"> <!-- 图片列表 begin --> <div class="pic"> <a href="http://career.sina.com.cn/3/2007/0928/15.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F15.html" target="_blank"><img src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" _ewebeditor_ta_src="http%3A%2F%2Fi0.sinaimg.cn%2Fedu%2Fdeco%2F2007%2F0928%2Faiying.jpg" width="109" height="87" alt="周宪环" /></a> <p><a href="http://career.sina.com.cn/3/2007/0928/15.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F15.html" target="_blank">周宪环</a></p> </div> <div class="pic"> <a href="http://career.sina.com.cn/3/2007/0928/16.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F16.html" target="_blank"><img src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" _ewebeditor_ta_src="http%3A%2F%2Fi1.sinaimg.cn%2Fedu%2Fdeco%2F2007%2F0928%2Fzhenwei.jpg" width="109" height="87" alt="周桢炜" /></a> <p><a href="http://career.sina.com.cn/3/2007/0928/16.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F16.html" target="_blank">周桢炜</a></p> </div> <div class="pic"> <a href="http://career.sina.com.cn/3/2007/0928/14.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F14.html" target="_blank"><img src="http://i2.sinaimg.cn/edu/deco/2007/0928/zhangying.jpg" _ewebeditor_ta_src="http%3A%2F%2Fi2.sinaimg.cn%2Fedu%2Fdeco%2F2007%2F0928%2Fzhangying.jpg" width="109" height="87" alt="张颖" /></a> <p><a href="http://career.sina.com.cn/3/2007/0928/14.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F14.html" target="_blank">张颖</a></p> </div> <div class="pic"> <a href="http://career.sina.com.cn/3/2007/0928/17.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F17.html" target="_blank"><img src="http://i3.sinaimg.cn/edu/deco/2007/0928/wangnaichao.jpg" _ewebeditor_ta_src="http%3A%2F%2Fi3.sinaimg.cn%2Fedu%2Fdeco%2F2007%2F0928%2Fwangnaichao.jpg" width="109" height="87" alt="王乃超" /></a> <p><a href="http://career.sina.com.cn/3/2007/0928/17.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F17.html" target="_blank">王乃超</a></p> </div> <div class="pic"> <a href="http://career.sina.com.cn/3/2007/0928/19.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F19.html" target="_blank"><img src="http://i1.sinaimg.cn/edu/deco/2007/0928/xiewenxiu.jpg" _ewebeditor_ta_src="http%3A%2F%2Fi1.sinaimg.cn%2Fedu%2Fdeco%2F2007%2F0928%2Fxiewenxiu.jpg" width="109" height="87" alt="谢雯琇" /></a> <p><a href="http://career.sina.com.cn/3/2007/0928/19.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F19.html" target="_blank">谢雯琇</a></p> </div> <div class="pic"> <a href="http://career.sina.com.cn/3/2007/0928/18.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F18.html" target="_blank"><img src="http://i1.sinaimg.cn/edu/deco/2007/0928/lvge.jpg" _ewebeditor_ta_src="http%3A%2F%2Fi1.sinaimg.cn%2Fedu%2Fdeco%2F2007%2F0928%2Flvge.jpg" width="109" height="87" alt="吕铬" /></a> <p><a href="http://career.sina.com.cn/3/2007/0928/18.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0928%2F18.html" target="_blank">吕铬</a></p> </div> <div class="pic"> <a href="http://career.sina.com.cn/3/2007/0927/12.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0927%2F12.html" target="_blank"><img src="http://i2.sinaimg.cn/edu/deco/2007/0928/zhengru.jpg" _ewebeditor_ta_src="http%3A%2F%2Fi2.sinaimg.cn%2Fedu%2Fdeco%2F2007%2F0928%2Fzhengru.jpg" width="109" height="87" alt="贾正如" /></a> <p><a href="http://career.sina.com.cn/3/2007/0927/12.html" _ewebeditor_ta_href="http%3A%2F%2Fcareer.sina.com.cn%2F3%2F2007%2F0927%2F12.html" target="_blank">贾正如</a></p> </div> <!-- 图片列表 end --> </div> <div id="List2"></div> </div> </div> <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div> </div> </div> <style type="text/css"> <!-- .rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;} .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;} .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;} .rollBox .Cont{width:663px;overflow:hidden;float:left;} .rollBox .ScrCont{width:10000000px;} .rollBox .Cont .pic{width:132px;float:left;text-align:center;} .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;} .rollBox .Cont .pic p{line-height:26px;color:#505050;} .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;} .rollBox .Cont a:hover{color:#f00;text-decoration:underline;} .rollBox #List1,.rollBox #List2{float:left;} --> </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%2F%2F--%3E%3C!%5BCDATA%5B%2F%2F%3E%3C!--%20%0D%0A%2F%2F%E5%9B%BE%E7%89%87%E6%BB%9A%E5%8A%A8%E5%88%97%E8%A1%A8%20mengjia%20070816%20%0D%0Avar%20Speed%20%3D%2010%3B%20%2F%2F%E9%80%9F%E5%BA%A6(%E6%AF%AB%E7%A7%92)%20%0D%0Avar%20Space%20%3D%205%3B%20%2F%2F%E6%AF%8F%E6%AC%A1%E7%A7%BB%E5%8A%A8(px)%20%0D%0Avar%20PageWidth%20%3D%20132%3B%20%2F%2F%E7%BF%BB%E9%A1%B5%E5%AE%BD%E5%BA%A6%20%0D%0Avar%20fill%20%3D%200%3B%20%2F%2F%E6%95%B4%E4%BD%93%E7%A7%BB%E4%BD%8D%20%0D%0Avar%20MoveLock%20%3D%20false%3B%20%0D%0Avar%20MoveTimeObj%3B%20%0D%0Avar%20Comp%20%3D%200%3B%20%0D%0Avar%20AutoPlayObj%20%3D%20null%3B%20%0D%0AGetObj(%22List2%22).innerHTML%20%3D%20GetObj(%22List1%22).innerHTML%3B%20%0D%0AGetObj('ISL_Cont').scrollLeft%20%3D%20fill%3B%20%0D%0AGetObj(%22ISL_Cont%22).onmouseover%20%3D%20function()%7BclearInterval(AutoPlayObj)%3B%7D%20%0D%0AGetObj(%22ISL_Cont%22).onmouseout%20%3D%20function()%7BAutoPlay()%3B%7D%20%0D%0AAutoPlay()%3B%20%0D%0Afunction%20GetObj(objName)%7Bif(document.getElementById)%7Breturn%20eval('document.getElementById(%22'%2BobjName%2B'%22)')%7Delse%7Breturn%20eval('document.all.'%2BobjName)%7D%7D%20%0D%0Afunction%20AutoPlay()%7B%20%2F%2F%E8%87%AA%E5%8A%A8%E6%BB%9A%E5%8A%A8%20%0D%0A%20clearInterval(AutoPlayObj)%3B%20%0D%0A%20AutoPlayObj%20%3D%20setInterval('ISL_GoDown()%3BISL_StopDown()%3B'%2C5000)%3B%20%2F%2F%E9%97%B4%E9%9A%94%E6%97%B6%E9%97%B4%20%0D%0A%7D%20%0D%0Afunction%20ISL_GoUp()%7B%20%2F%2F%E4%B8%8A%E7%BF%BB%E5%BC%80%E5%A7%8B%20%0D%0A%20if(MoveLock)%20return%3B%20%0D%0A%20clearInterval(AutoPlayObj)%3B%20%0D%0A%20MoveLock%20%3D%20true%3B%20%0D%0A%20MoveTimeObj%20%3D%20setInterval('ISL_ScrUp()%3B'%2CSpeed)%3B%20%0D%0A%7D%20%0D%0Afunction%20ISL_StopUp()%7B%20%2F%2F%E4%B8%8A%E7%BF%BB%E5%81%9C%E6%AD%A2%20%0D%0A%20clearInterval(MoveTimeObj)%3B%20%0D%0A%20if(GetObj('ISL_Cont').scrollLeft%20%25%20PageWidth%20-%20fill%20!%3D%200)%7B%20%0D%0A%20%20Comp%20%3D%20fill%20-%20(GetObj('ISL_Cont').scrollLeft%20%25%20PageWidth)%3B%20%0D%0A%20%20CompScr()%3B%20%0D%0A%20%7Delse%7B%20%0D%0A%20%20MoveLock%20%3D%20false%3B%20%0D%0A%20%7D%20%0D%0A%20AutoPlay()%3B%20%0D%0A%7D%20%0D%0Afunction%20ISL_ScrUp()%7B%20%2F%2F%E4%B8%8A%E7%BF%BB%E5%8A%A8%E4%BD%9C%20%0D%0A%20if(GetObj('ISL_Cont').scrollLeft%20%3C%3D%200)%7BGetObj('ISL_Cont').scrollLeft%20%3D%20GetObj('ISL_Cont').scrollLeft%20%2B%20GetObj('List1').offsetWidth%7D%20%0D%0A%20GetObj('ISL_Cont').scrollLeft%20-%3D%20Space%20%3B%20%0D%0A%7D%20%0D%0Afunction%20ISL_GoDown()%7B%20%2F%2F%E4%B8%8B%E7%BF%BB%20%0D%0A%20clearInterval(MoveTimeObj)%3B%20%0D%0A%20if(MoveLock)%20return%3B%20%0D%0A%20clearInterval(AutoPlayObj)%3B%20%0D%0A%20MoveLock%20%3D%20true%3B%20%0D%0A%20ISL_ScrDown()%3B%20%0D%0A%20MoveTimeObj%20%3D%20setInterval('ISL_ScrDown()'%2CSpeed)%3B%20%0D%0A%7D%20%0D%0Afunction%20ISL_StopDown()%7B%20%2F%2F%E4%B8%8B%E7%BF%BB%E5%81%9C%E6%AD%A2%20%0D%0A%20clearInterval(MoveTimeObj)%3B%20%0D%0A%20if(GetObj('ISL_Cont').scrollLeft%20%25%20PageWidth%20-%20fill%20!%3D%200%20)%7B%20%0D%0A%20%20Comp%20%3D%20PageWidth%20-%20GetObj('ISL_Cont').scrollLeft%20%25%20PageWidth%20%2B%20fill%3B%20%0D%0A%20%20CompScr()%3B%20%0D%0A%20%7Delse%7B%20%0D%0A%20%20MoveLock%20%3D%20false%3B%20%0D%0A%20%7D%20%0D%0A%20AutoPlay()%3B%20%0D%0A%7D%20%0D%0Afunction%20ISL_ScrDown()%7B%20%2F%2F%E4%B8%8B%E7%BF%BB%E5%8A%A8%E4%BD%9C%20%0D%0A%20if(GetObj('ISL_Cont').scrollLeft%20%3E%3D%20GetObj('List1').scrollWidth)%7BGetObj('ISL_Cont').scrollLeft%20%3D%20GetObj('ISL_Cont').scrollLeft%20-%20GetObj('List1').scrollWidth%3B%7D%20%0D%0A%20GetObj('ISL_Cont').scrollLeft%20%2B%3D%20Space%20%3B%20%0D%0A%7D%20%0D%0Afunction%20CompScr()%7B%20%0D%0A%20var%20num%3B%20%0D%0A%20if(Comp%20%3D%3D%200)%7BMoveLock%20%3D%20false%3Breturn%3B%7D%20%0D%0A%20if(Comp%20%3C%200)%7B%20%2F%2F%E4%B8%8A%E7%BF%BB%20%0D%0A%20%20if(Comp%20%3C%20-Space)%7B%20%0D%0A%20%20%20Comp%20%2B%3D%20Space%3B%20%0D%0A%20%20%20num%20%3D%20Space%3B%20%0D%0A%20%20%7Delse%7B%20%0D%0A%20%20%20num%20%3D%20-Comp%3B%20%0D%0A%20%20%20Comp%20%3D%200%3B%20%0D%0A%20%20%7D%20%0D%0A%20%20GetObj('ISL_Cont').scrollLeft%20-%3D%20num%3B%20%0D%0A%20%20setTimeout('CompScr()'%2CSpeed)%3B%20%0D%0A%20%7Delse%7B%20%2F%2F%E4%B8%8B%E7%BF%BB%20%0D%0A%20%20if(Comp%20%3E%20Space)%7B%20%0D%0A%20%20%20Comp%20-%3D%20Space%3B%20%0D%0A%20%20%20num%20%3D%20Space%3B%20%0D%0A%20%20%7Delse%7B%20%0D%0A%20%20%20num%20%3D%20Comp%3B%20%0D%0A%20%20%20Comp%20%3D%200%3B%20%0D%0A%20%20%7D%20%0D%0A%20%20GetObj('ISL_Cont').scrollLeft%20%2B%3D%20num%3B%20%0D%0A%20%20setTimeout('CompScr()'%2CSpeed)%3B%20%0D%0A%20%7D%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%3C!%5D%5D%3E%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程