`

jquery图片左右滚动，代码很简洁

 
阅读更多 

<!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" target="_blank"><img src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="109" height="87" alt="周宪环" /></a> 
          <p><a href="http://career.sina.com.cn/3/2007/0928/15.html" target="_blank">周宪环</a></p> 
         </div>        
         
 <div class="pic"> 
          <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> 
          <p><a href="http://career.sina.com.cn/3/2007/0928/16.html" target="_blank">周桢炜</a></p> 
         </div> 
         <div class="pic"> 
          <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> 
          <p><a href="http://career.sina.com.cn/3/2007/0928/14.html" target="_blank">张颖</a></p> 
         </div> 
         <div class="pic"> 
          <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> 
          <p><a href="http://career.sina.com.cn/3/2007/0928/17.html" target="_blank">王乃超</a></p> 
         </div> 
         <div class="pic"> 
          <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> 
          <p><a href="http://career.sina.com.cn/3/2007/0928/19.html" target="_blank">谢雯琇</a></p> 
         </div> 
 <div class="pic"> 
          <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> 
          <p><a href="http://career.sina.com.cn/3/2007/0928/18.html" target="_blank">吕铬</a></p> 
         </div>       
         <div class="pic"> 
          <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> 
          <p><a href="http://career.sina.com.cn/3/2007/0927/12.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> 
<script language="javascript" type="text/javascript"> 
<!--//--><![CDATA[//><!-- 
//图片滚动列表 mengjia 070816 
var Speed = 10; //速度(毫秒) 
var Space = 5; //每次移动(px) 
var PageWidth = 132; //翻页宽度 
var fill = 0; //整体移位 
var MoveLock = false; 
var MoveTimeObj; 
var Comp = 0; 
var AutoPlayObj = null; 
GetObj("List2").innerHTML = GetObj("List1").innerHTML; 
GetObj('ISL_Cont').scrollLeft = fill; 
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);} 
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();} 
AutoPlay(); 
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} 
function AutoPlay(){ //自动滚动 
 clearInterval(AutoPlayObj); 
 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间 
} 
function ISL_GoUp(){ //上翻开始 
 if(MoveLock) return; 
 clearInterval(AutoPlayObj); 
 MoveLock = true; 
 MoveTimeObj = setInterval('ISL_ScrUp();',Speed); 
} 
function ISL_StopUp(){ //上翻停止 
 clearInterval(MoveTimeObj); 
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){ 
  Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); 
  CompScr(); 
 }else{ 
  MoveLock = false; 
 } 
 AutoPlay(); 
} 
function ISL_ScrUp(){ //上翻动作 
 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth} 
 GetObj('ISL_Cont').scrollLeft -= Space ; 
} 
function ISL_GoDown(){ //下翻 
 clearInterval(MoveTimeObj); 
 if(MoveLock) return; 
 clearInterval(AutoPlayObj); 
 MoveLock = true; 
 ISL_ScrDown(); 
 MoveTimeObj = setInterval('ISL_ScrDown()',Speed); 
} 
function ISL_StopDown(){ //下翻停止 
 clearInterval(MoveTimeObj); 
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){ 
  Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill; 
  CompScr(); 
 }else{ 
  MoveLock = false; 
 } 
 AutoPlay(); 
} 
function ISL_ScrDown(){ //下翻动作 
 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;} 
 GetObj('ISL_Cont').scrollLeft += Space ; 
} 
function CompScr(){ 
 var num; 
 if(Comp == 0){MoveLock = false;return;} 
 if(Comp < 0){ //上翻 
  if(Comp < -Space){ 
   Comp += Space; 
   num = Space; 
  }else{ 
   num = -Comp; 
   Comp = 0; 
  } 
  GetObj('ISL_Cont').scrollLeft -= num; 
  setTimeout('CompScr()',Speed); 
 }else{ //下翻 
  if(Comp > Space){ 
   Comp -= Space; 
   num = Space; 
  }else{ 
   num = Comp; 
   Comp = 0; 
  } 
  GetObj('ISL_Cont').scrollLeft += num; 
  setTimeout('CompScr()',Speed); 
 } 
} 
//--><!]]> 
</script> 
</body> 
</html>
 
分享到：
| mysql查询中文首字母排序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics