图片滚动到一定位置后停顿一会儿,然后再向上滚动,循环不间断。
代码:
<div id="icefable1">
<!--插入你的图片链接-->
<script>marqueesHeight=115;
stopscroll=false;
with(icefable1){
style.width=640;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preTop=0; currentTop=115; stoptime=0;
icefable1.innerHTML+=icefable1.innerHTML;
function init_srolltext(){
icefable1.scrollTop=0;
setInterval("scrollUp()",20);
}init_srolltext();
function scrollUp(){
if(stopscroll==true) return;
currentTop+=1;
if(currentTop==116)
{
stoptime+=1;
currentTop-=1;
if(stoptime==114)
{
currentTop=0;
stoptime=0;
}
}
else {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=1;
if(preTop==icefable1.scrollTop){
icefable1.scrollTop=115;
icefable1.scrollTop+=1;
}
}
}
</script>
</div>
==================================================================
下面是我已经调试好的友情链接,将原{$ShowFriendSite(1,21,7,2)}代码,用下面的代码替换即可:
<!--友情链接滚动代码开始-->
<div id="icefable2">
{$ShowFriendSite(1,21,7,2)}
<script>marqueesHeight=41;
stopscroll=false;
with(icefable2){
style.width=750;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preTop=0; currentTop=41; stoptime=0;
icefable2.innerHTML+=icefable2.innerHTML;
function init_srolltext(){
icefable2.scrollTop=0;
setInterval("scrollUp()",50);
}init_srolltext();
function scrollUp(){
if(stopscroll==true) return;
currentTop+=1;
if(currentTop==42)
{
stoptime+=1;
currentTop-=1;
if(stoptime==40)
{
currentTop=0;
stoptime=0;
}
}
else {
preTop=icefable2.scrollTop;
icefable2.scrollTop+=1;
if(preTop==icefable2.scrollTop){
icefable2.scrollTop=41;
icefable2.scrollTop+=1;
}
}
}
</script>
</div>
<!--友情链接滚动代码结束-->
=======================================================
还有一种另外的方法
<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="B6B191">
<tr>
<td bgcolor="FFFDE8">
<table width="140" border="0" cellspacing="0" align="center">
<tr><td>
<div id="article1" style="width:140;">
<TABLE cellSpacing="0" cellPadding="0" width="140" border="0">
<tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/1.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/2.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/1.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/2.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/1.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/2.gif width=88 height=31 border=0></a></td></tr> </TABLE>
</div>
<div id="article2" style="position:absolute;z-index:1;visibility:hidden"></div>
</td></tr>
</table>
<script>
articleHeight=80;
stopscrolla=false;
article1.scrollTop=0;
//more javascript from http://www.xintiao.net
with(article1){
style.width=0;
style.height=articleHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscrolla=true");
onmouseout=new Function("stopscrolla=false");
}
preTopa=0; currentTopa=0; stoptimea=0;
function init_srolltext1(){
article2.innerHTML="";
article2.innerHTML+=article1.innerHTML;
article1.innerHTML=article2.innerHTML+article2.innerHTML;
setInterval("scrollUp1()",50);
}
function scrollUp1(){
if(stopscrolla==true) return;
currentTopa+=1;
if(currentTopa==40)
{
stoptimea+=1;
currentTopa-=1;
if(stoptimea==50)
{
currentTopa=0;
stoptimea=0;
}
}
else {
preTopa=article1.scrollTop;
article1.scrollTop+=1;
if(preTopa==article1.scrollTop){
article1.scrollTop=article2.offsetHeight-articleHeight;
article1.scrollTop+=1;
}
}
}
init_srolltext1();
</script>
=================================================
第一步:把下面的代码放到<head>......</head>处。
<script language="JavaScript">
function start_marquee(div,spd,step){
obj_marquee = document.getElementById(div);
marquee_high = parseInt(obj_marquee.style.height);
marquee_step = marquee_high/step;
obj_marquee.appendChild(obj_marquee.firstChild.cloneNode(true));
setInterval ("step_c=1;setTimeout('marquee_show("+step+")',0)", spd*1000);
}
function marquee_show(step){
obj_marquee.scrollTop += marquee_step;
if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) {
obj_marquee.scrollTop = 0;
}
if(step_c++ < step) setTimeout("marquee_show("+step+")", 0);
return;
}
</script>
第二步:确定放置滚动层的位置,在此位置插入一个层(DW:工具→插入层),指定层编号(ID)、宽和高,overflow(溢出)属性设为hidden,在此层内插入一个新层,新层里放置需要滚动的内容,代码示例:
<div id="mydiv" style="position:absolute; width:300; height:150;overflow: hidden">
<div>
内容(可以是表格、图片、文字......)
</div>
</div>
第三步:第二步生成的代码下插入以下代码:
<script language="JavaScript">
start_marquee("mydiv",3,10);
</script>
【参数解释】
start_marquee(div,spd,step)
div:层编号
spd:停留时间(值越小,速度越快)
step:跨越时的分段数(值越大,效果更柔和,等于1时直接切换)
参考:
演示1:start_marquee("mydiv",5,1)
演示2:start_marquee("mydiv2",3,10)
BTW:只要指定不同的层编号,在一个页面可以有多个SlideBox.
推荐使用第二种方法,本人通过测试

