多行图片无间滚动解决方法

2012-04-18

多行图片无间滚动跪求大虾们帮忙看看~~我要怎么改才能做到无缝滚动？？？table height100%trtdimg

多行图片无间滚动
跪求大虾们帮忙看看~~我要怎么改才能做到无缝滚动？？？

<table height="100%">

<tr>
<td>
<img src="../images/case/arrow-prev.png" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"/>
</td>
<td>
<div class="rollBox">
<div class="Cont" id="ISL_Cont">
<div class="ScrCont">
<div id="List1">

<div class="xpic">
<a href="#" title='冯凯' target='_top'>
<img src="../images/Mechanism/5.jpg" width="103" height="107" border="0" />
</a>
<p>
<input type="image" src="../images/Mechanism/Details.gif" value="详情" />
<a href="#" title='冯凯' target='_top'>冯凯</a>
<input type="image" src="../images/Mechanism/call.gif" value="对话"/>
</p>
</div>
<div class="xpic">
<a href="#" title='冯凯' target='_top'>
<img src="../images/Mechanism/6.jpg" width="103" height="107" border="0" />
</a>
<p>
<input type="image" src="../images/Mechanism/Details.gif" value="详情" />
<a href="#" title='冯凯' target='_top'>冯凯</a>
<input type="image" src="../images/Mechanism/call.gif" value="对话"/>
</p>
</div>
<div class="xpic">
<a href="#" title='冯凯' target='_top'>
<img src="../images/Mechanism/7.jpg" width="103" height="107" border="0" />
</a>
<p>
<input type="image" src="../images/Mechanism/Details.gif" value="详情" />
<a href="#" title='冯凯' target='_top'>冯凯</a>
<input type="image" src="../images/Mechanism/call.gif" value="对话"/>
</p>
</div>
<div class="xpic">
<a href="#" title='冯凯' target='_top'>
<img src="../images/Mechanism/2.jpg" width="103" height="107" border="0" />
</a>

<input type="image" src="../images/Mechanism/Details.gif" value="详情" />
<a href="#" title='冯凯' target='_top'>冯凯</a>
<input type="image" src="../images/Mechanism/call.gif" value="对话"/>
</p>
</div>
<div class="xpic">
<a href="#" title='冯凯' target='_top'>
<img src="../images/Mechanism/5.jpg" width="103" height="107" border="0" />
</a>
<p>
<input type="image" src="../images/Mechanism/Details.gif" value="详情" />
<a href="#" title='冯凯'>冯凯</a>
<input type="image" src="../images/Mechanism/call.gif" value="对话"/>
</p>
</div>
</div>

</div>
<script language="javascript" type="text/javascript">

<![CDATA[//><!--

//图片滚动列表 mengjia 070816

var Speed = 10; //速度(毫秒)

var Space = 10; //每次移动(px)

var PageWidth = 140; //翻页宽度

var fill = 0; //整体移位

var MoveLock = false;

var MoveTimeObj;

var Comp = 0;

var AutoPlayObj = null;

GetObj("List1").innerHTML;

GetObj("List2").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();',2000); //间隔时间

}

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>

</div>
</div>

</td>
<td width="40" align="top">
<img src="../images/case/arrow-next.png" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"/>
</td>
</tr>
</table>

[解决办法]
其实无缝滚动很简单的，把思路弄清楚就可以自己改动了

1，需求的是多行滚动
2，根据第一点，多复制一个第一行，放到最后一行，作为无缝滚动的连接部分
3，当滚动到最后一行时（最后一行完全显示完毕），将滚动部分从新从第一行滚动
[解决办法]
http://code.usuishi.com/Web/DemoView.aspx?DemoID=19
参考

热点排行

JavaScript

多行图片无间滚动解决方法