焦点图片（自动播放不限图片张数可左右控制）

技术2025-11-01 10

先看效果图：

原文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>超级经典一套鼠标控制左右滚动图片带自动翻滚</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!--

.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>

<![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>

.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>

<ul>

</ul>

</div>

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>

.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>

<ul>

</ul>

</div>

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>

</body>

</html>

scroll.v.1.2.js的内容：

*图片文字滚动扩展包

*版本：v1.2

*编码：utf-8版本

*作者：cici

*email：chengds@ifeng.com

*日期：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);

}

最新回复(0)

焦点图片（自动播放 不限图片张数 可左右控制）

焦点图片（自动播放不限图片张数可左右控制）