先看效果圖:
原文件:
<!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>
<script type="text/javascript" src="js/scroll.v.1.2.js"></script>
</head>
<body>
<!--begin-->
<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>
<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 = 40; //速度(毫秒)
var Space = 20; //每次移動(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>
<!-- end -->
<!--begin-->
<style type="text/css">
.scrollList_40 { float:left; position: relative; width:575px; height:200px;}/*101116a*/
.scrollList_40 .photolist {position: relative;overflow: visible;width:10000px; margin:10px 0px;}
.scrollList_40 .photolist ul{float:left;margin:0px;padding:0px;}
.scrollList_40 .photolist li {float:left;margin:0 5px;width:132px;height:178px; border:1px solid #ccc;}/*101116a*/
.scrollList_40 .photolist li img{ width:132px; height:178px;}/*101116a*/
.butL, .butR{ float:left; background:url(images/iconLeft_4.gif) no-repeat; width:19px; height:82px; border:0px; margin-right:12px;margin-top:50px;}
.butR{ background-image:url(images/iconRight_4.gif);margin-left:15px;}
.clear { clear: both; height: 0px; margin: 0 auto; font-size: 0px; line-height: 0px;}
</style>
<input id="pre_40" type="button" value="" class="butL" />
<div class="scrollList_40" >
<div id="photolist_40" class="photolist" >
<ul>
<li><a href="" target="_blank">
<img height="178" src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="178" src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="178" src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="178" src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="178" src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="178" src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="178" src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="178" src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="134" border="0" alt=""/></a></li>
</ul>
</div>
</div>
<input id="next_40" type="button" value="" class="butR" />
<div class="clear"></div>
<script language="javascript" type="text/javascript">
var scroll_40= new ifeng_Scroll("photolist_40","pre_40","next_40");
scroll_40.Speed=20; //滾動速度微調
scroll_40.IsSmoothScroll= false;//是否平滑連續滾動平滑滾動:true 間隔滾動:false
scroll_40.PauseTime = 2000;//間隔滾動時每次滾動間隔的時間。單位:毫秒。建議值:--3000 適用於間隔滾動。
scroll_40.Direction = "E"; //滾動方向.向東:E,向北:N
scroll_40.Step =10; //滾動步長,可以理解爲滾動速度。值越大速度越快。值範圍:1--10
scroll_40.ControllerType = "click";//上一個和下一個按鈕事件的觸發方式:click爲點擊觸發滾動否則就是鼠標按住按鈕觸發滾動。支持click 和mousedown兩種模式
scroll_40.BackCall = null;//回調函數滾動到末尾時執行
scroll_40.Init();
scroll_40.Start(); //開始滾動
</script>
<!--end-->
<!--begin-->
<style type="text/css">
.scrollList_41 { float:left;position: relative; width:575px;}/*101116a*/
.scrollList_41 .photolist {position: relative;overflow: visible;width:10000px; margin:10px 0px;}
.scrollList_41 .photolist ul{float:left;margin:0px;padding:0px;}
.scrollList_41 .photolist li {float:left;margin:0 5px;width:132px; height:95px; border:1px solid #ccc;}/*101116a*/
.scrollList_41 .photolist li img{ width:132px; height:95px;}/*101116a*/
.butL2, .butR2{ float:left; background:url(images/iconLeft_4.gif) no-repeat; width:19px; height:82px; border:0px; margin-right:12px; margin-top:16px;}
.butR2{ background-image:url(images/iconRight_4.gif); margin-left:15px;}
.clear { clear: both; height: 0px; margin: 0 auto; font-size: 0px; line-height: 0px;}
</style>
<input id="pre_41" type="button" value="" class="butL2" />
<div class="scrollList_41" >
<div id="photolist_41" class="photolist" >
<ul>
<li><a href="" target="_blank">
<img height="95" src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="95" src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="95" src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="95" src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="95" src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="95" src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="95" src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="134" border="0" alt=""/></a></li>
<li><a href="" target="_blank">
<img height="95" src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="134" border="0" alt=""/></a></li>
</ul>
</div>
</div>
<input id="next_41" type="button" value="" class="butR2" />
<div class="clear"></div>
<script language="javascript" type="text/javascript">
var scroll_41= new ifeng_Scroll("photolist_41","pre_41","next_41");
scroll_41.Speed=20; //滾動速度微調
scroll_41.IsSmoothScroll= false;//是否平滑連續滾動平滑滾動:true 間隔滾動:false
scroll_41.PauseTime = 2000;//間隔滾動時每次滾動間隔的時間。單位:毫秒。建議值:--3000 適用於間隔滾動。
scroll_41.Direction = "E"; //滾動方向.向東:E,向北:N
scroll_41.Step =2; //滾動步長,可以理解爲滾動速度。值越大速度越快。值範圍:1--10
scroll_41.ControllerType = "click";//上一個和下一個按鈕事件的觸發方式:click爲點擊觸發滾動否則就是鼠標按住按鈕觸發滾動。支持click 和mousedown兩種模式
scroll_41.BackCall = null;//回調函數滾動到末尾時執行
scroll_41.Init();
scroll_41.Start(); //開始滾動
</script>
<!--end-->
</body>
</html>
scroll.v.1.2.js的內容:
/*
*圖片文字滾動擴展包
*版本:v1.2
*編碼:utf-8版本
*作者:cici
*email:[email protected]
*日期:2009-4-15
*/
/*
container:滾動的容器ID
btnPrevious:上一步按鈕的ID
btnNext:下一步按鈕的ID
*/
function ifeng_Scroll(container,btnPrevious,btnNext)
{
////////////////對外接口/////////////////////////
this.IsAutoScroll = true; //是否自動滾動
this.IsSmoothScroll= true;//是否平滑連續滾動 平滑滾動:true 間隔滾動:false
this.PauseTime = 1000;//間隔滾動時每次滾動間隔的時間。單位:毫秒。建議值:100--3000 適用於間隔滾動。
this.Direction = "N"; //滾動方向.向東:E,向北:N
this.ControllerType = "click";//上一個和下一個按鈕事件的觸發方式:click爲點擊觸發滾動 否則就是 鼠標按住按鈕觸發滾動。支持click 和mousedown兩種模式
this.BackCall = null;//回調函數 滾動到末尾時執行
this.Step = 1;//步長 可以理解爲速度1--10
////////////////對外接口/////////////////////////
this.Speed = 10;
this.container = container;
this.NextButton = this.$(btnNext);
this.PreviousButton = this.$(btnPrevious);
this.ScrollElement = this.$(container);
this.UlElement = this.$(container).getElementsByTagName('ul')[0];//ul元素
this.UlElement.innerHTML+=this.UlElement.innerHTML;
this.UlSpace ;//ul的實際寬度
this.LiSpace;
}
ifeng_Scroll.prototype = {
lastpos:0,
curPos:0,
curTimeoutId:null,
curIntervalScrollTimeoutId:null,
ScrollElementPos:0,
$:function(element)
{
return document.getElementById(element);
},
Init:function()
{
this.UlSpace = this.Direction=="E"?this.UlElement.offsetWidth:this.UlElement.offsetHeight;//ul的實際寬度
this.LiSpace = parseInt(this.UlSpace/this.UlElement.getElementsByTagName('li').length);
this.UlSpace = this.LiSpace*this.UlElement.getElementsByTagName('li').length;
this.Direction=="E"?this.$(this.container).style.width=this.UlSpace+"px":this.$(this.container).style.height=this.UlSpace+"px";
//設置基礎樣式
this.ScrollElement.style.overflow="visible";
this.ScrollElement.parentNode.style.overflow="hidden";
this.Direction=="E"?this.ScrollElement.style.width="10000px":this.ScrollElement.style.height="10000px";
this.UlElement.style.float="left";
this.ScrollType=this.Direction=="E"?"left":"top";
this.Bind(this,this.PreviousButton,this.ControllerType,"Pre");
this.Bind(this,this.NextButton,this.ControllerType,"Next");
this.ScrollElement.onmouseover = this.GetFunction(this,"MouseOver");
this.ScrollElement.onmouseout = this.GetFunction(this,"MouseOut");
},
Reset:function()
{
this.Pause();
this.ScrollElement.style[this.ScrollType] = '0px';
},
Bind:function(_this,el,type,param)
{
if(el)
{
if(type=="click"){
el.onclick = this.GetFunction(this,param);
}
else
{
el.onmousedown = this.GetFunction(this,"MouseDown",param);
el.onmouseup = this.GetFunction(this,"MouseUp");
}
el.onmouseover = this.GetFunction(this,"MouseOver");
el.onmouseout = this.GetFunction(this,"MouseOut");
}
},
Start:function()
{
if(!this.IsAutoScroll) return;
if(this.IsSmoothScroll)
{
this.SmoothScroll();
}
else
{
this.IntervalScroll();
}
},
Pause:function()
{
clearTimeout(this.curTimeoutId);
clearTimeout(this.curIntervalScrollTimeoutId);
},
MouseOver:function()
{
clearTimeout(this.mouseoutTimeoutId);
this.mouseoverTimeoutId = setTimeout(this.GetFunction(this,"Pause"),10);
},
MouseOut:function()
{
clearTimeout(this.mouseoverTimeoutId);
this.mouseoutTimeoutId = setTimeout(this.GetFunction(this,"Start"),10);
},
MouseDown:function(direction)
{
var _step;
var _to;
if(direction=="Pre")
{
_step = this.Step*2;
curPos = parseInt(this.ScrollElement.style[this.ScrollType]);
if(!curPos) curPos=0;
if(curPos==0)
{
this.ScrollElement.style[this.ScrollType] = -this.UlSpace/2 + "px";
this.curPos=-this.UlSpace/2;
}
_to = 0;
}
else
{
_step = -this.Step*2;
_to = -this.UlSpace/2;
}
moveParams = {from:this.curPos, to:_to, step: _step,controller:"MouseDown:" + direction,callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
MouseUp:function()
{
clearTimeout(this.curTimeoutId);
},
Pre:function()
{
var curPos = parseInt(this.ScrollElement.style[this.ScrollType]);
if(!curPos) curPos=0;
var _to ;
if(curPos==0)
{
this.ScrollElement.style[this.ScrollType] = -this.UlSpace/2 + "px";
this.curPos=-this.UlSpace/2;
_to = -this.UlSpace/2 + this.LiSpace;
}
else
{
_to = this.curPos%this.LiSpace==0?this.curPos + this.LiSpace:parseInt(this.curPos/this.LiSpace)*this.LiSpace;
}
moveParams = {from:this.curPos, to:_to, step: this.Step*2,controller:"Previous",callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
Next:function()
{
_to = this.curPos%this.LiSpace==0?this.curPos - this.LiSpace:(parseInt(this.curPos/this.LiSpace)-1)*this.LiSpace;
moveParams = {from:this.curPos, to:_to, step: -this.Step*2,controller:"Next",callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
IntervalScroll:function()
{
var _to = parseInt(this.curPos/this.LiSpace)*this.LiSpace-this.LiSpace;
var moveParams = {from:this.curPos, to:_to, step: -this.Step,controller:"IntervalScroll",callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
SmoothScroll:function()
{
var _to = -this.UlSpace/2;
var moveParams = {from:this.curPos, to:_to, step: -this.Step,controller:"SmoothScroll",callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
RunScroll:function(params)
{
this.Scroll(params);
},
Scroll:function(param)
{
var step = Math.abs(param.to - this.curPos)<Math.abs(param.step)?param.to - this.curPos:param.step;
this.ScrollElement.style[this.ScrollType] =(param.from+step)+"px";
this.curPos = parseInt(this.ScrollElement.style[this.ScrollType]);
clearTimeout(this.curTimeoutId);
if(this.curPos!=param.to)
{
var moveParams = {from:this.curPos, to:param.to, step: param.step,controller:param.controller,callback:param.callback};
this.curTimeoutId = setTimeout(this.GetFunction(this,"Scroll",moveParams),this.Speed);
}
else
{
if(param.callback) param.callback();
if(param.controller=="SmoothScroll")
{ this.SmoothScroll();}
else if (param.controller=="IntervalScroll")
{
if(this.curIntervalScrollTimeoutId) clearTimeout(this.curIntervalScrollTimeoutId);
this.curIntervalScrollTimeoutId = setTimeout(this.GetFunction(this,"IntervalScroll"),this.PauseTime);
}
else if(param.controller.indexOf("MouseDown")!=-1)
{
derection = param.controller.split(':')[1];
this.MouseDown(derection);
}
}
},
ScrollFinish:function()
{
if(this.curPos<=-this.UlSpace/2)
{
this.ScrollElement.style[this.ScrollType] = "0px";
}
else if(this.curPos>=0)
{
this.ScrollElement.style[this.ScrollType] = -this.UlSpace/2 + "px";
}
this.curPos = parseInt(this.ScrollElement.style[this.ScrollType]);
if(this.BackCall)this.BackCall();
},
GetFunction:function(variable,method,param)
{
return function()
{
variable[method](param);
}
}
}