图片首尾相接无缝滚动实例代码(向左/向右)

前几天遇到一个图片滚动的问题,平实写的滚动都是一次滚动,首位不想接,下面的例子可以解决这个问题,首尾无缝相接滚动,可以向左滚动,也可以向右滚动。下面就是例子的代码。 图片省略,样式省略。

更多详情实例请访问 http://www.walkerjava.com/thread-153-1-1.html

HTML代码

< div id ="colee_right" style ="white-space: nowrap; overflow: hidden;" >
< table cellpadding ="0" cellspacing ="0" border ="0" style ="border: none;" >
< tr >
< td id ="colee_right1" valign ="top" align ="center" style ="border: none;" >
< table class ="rolltable" cellpadding ="0" cellspacing ="0" border ="0" style ="border: none;" >
< tr align ="center" >
< td >
< img class ="title_img" src ="images/new_dedecms.gif" title ="织梦内容管理系统" />
</td>
< td >
< img class ="title_img" src ="images/new_discuz.gif" title ="Discuz!社区论坛" />
</td>
< td >
< img class ="title_img" src ="images/new_phpcms.gif" title ="phpcms内容管理系统" />
</td>
< td >
< img class ="title_img" src ="images/new_dvbbs.gif" title ="动网论坛" />
</td>
< td >
< img class ="title_img" src ="images/new_ecms.gif" title ="帝国管理系统" />
</td>
< td >
< img class ="title_img" src ="images/new_shopex.gif" title ="shopex专业网店系统" />
</td>
< td >
< img class ="title_img" src ="images/new_joekoe.gif" title ="乔客内容管理系统" />
</td>
< td >
< img class ="title_img" src ="images/new_phpwind.gif" title ="phpwind内容管理系统" />
</td>
< td >
< img class ="title_img" src ="images/new_pjblog.gif" title ="中文个人博客系统程序" />
</td>
< td >
< img class ="title_img" src ="images/new_oblog.gif" title ="oblog博客系统" />
</td>
< td >
< img class ="title_img" src ="imagesnew_dvnet.gif" title ="动网内容管理系统" />
</td>
</tr>
</table>
</td>
< td id ="colee_right2" valign ="top" style ="border: none;" > </td>
</tr>
</table>
</div>
javascript代码
var speed = 30
//速度数值越大速度越慢
var colee_right2 = document.getElementById( "colee_right2");
var colee_right1 = document.getElementById( "colee_right1");
var colee_right = document.getElementById( "colee_right");
colee_right2.innerHTML = colee_right1.innerHTML;
function Marquee4() {
// 控制从右向左滚动
if (colee_right.scrollLeft >= colee_right2.offsetWidth)
colee_right.scrollLeft = 0;
else {
colee_right.scrollLeft++;
}
// 控制从左向右滚动
/*
if (colee_right.scrollLeft <= 0)
colee_right.scrollLeft += colee_right2.offsetWidth;
else {
colee_right.scrollLeft--;
}*/
}
var MyMar4 = setInterval(Marquee4, speed);
colee_right. = function() {
clearInterval(MyMar4);
}
colee_right. = function() {
MyMar4 = setInterval(Marquee4, speed);
}

你可能感兴趣的:(无缝,java技术交流,图片连续滚动,首尾相连)