您的位置：首页 > 其它

超级好用的鼠标控制图片左右…

2013-10-30 14:04 204 查看
xie原文地址：超级好用的鼠标控制图片左右滚动代码自动向左滚动代码作者：老康代码：代码复制后调整样式和脚本即可

<!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://www.ytworks.cn"
target="_blank"><img
src="http://www.ytworks.cn/img/bp_ali.gif"
/></a>
</div>

<div class="pic"> <a
href="http://www.ytworks.cn"
target="_blank"><img
src="http://www.ytworks.cn/img/bp_baidu.gif"
/></a></div>

<div class="pic"> <a
href="http://www.ytworks.cn"
target="_blank"><img
src="http://www.ytworks.cn/img/bp_q.gif"
/></a></div>

<div class="pic"> <a
href="http://www.ytworks.cn"
target="_blank"><img
src="http://www.ytworks.cn/img/google.gif"
/></a></div>

<div class="pic"> <a
href="http://www.ytworks.cn"
target="_blank"><img
src="http://www.ytworks.cn/img/jian.gif"
/></a></div>

<div class="pic"> <a
href="http://www.ytworks.cn"
target="_blank"><img hspace="1"
src="http://www.ytworks.cn/img/jie.gif"
/></a></div>

<div class="pic"> <a
href="http://www.ytworks.cn"
target="_blank"><img
src="http://www.ytworks.cn/img/yahoo.gif"
/></a></div>

<div class="pic"> <a
href="http://http://www.ytworks.cn"
target="_blank"><img
src="http://www.ytworks.cn/img/china.gif"
/></a></div>

<div class="pic"> <a
href="http://www.ytworks.cn"
target="_blank"><img
src="http://www.ytworks.cn/img/bp_n.gif"
/></a></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.getElementByIdx){return
('document.getElementByIdx("'+objName+'")')}else{return
('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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航