I am try to scroll images (about 25 images) through html marquee . I want continue scrolling without any scpace come after ending the list.
put this code in body:
<ul id="scroller"><li><img src="http://www.blogger.com/img1.jpg" width="130" border="0" /> <li><img src="http://www.blogger.com/img2.jpg" width="130" border="0" /> <li><img src="http://www.blogger.com/img3.jpg" width="130" border="0" /></li><li><img src="http://www.blogger.com/img4.jpg" width="130" border="0" /> <li></li></ul>
<script language="javascript" type="text/javascript">scrolling('scroller', 60);</script>
and put the javascript and style in head
<script language="javascript">
function scrolling(ulId, speed)
{
this.container = document.getElementById(ulId);
this.container.Scroller = this;
this.speed = speed;
this.scroll = function()
{
var c = this.container.firstChild;
var first = null;
while (c)
{
if (c.tagName == 'LI')
{ first = c; break; }
c = c.nextSibling;
}
var nodeSize = 78;
var px = 0;
nodeSize = first.clientWidth;
if (first.style.marginLeft != ''){
px = parseInt(first.style.marginLeft);
}
first.style.marginLeft = ( px - 2 ) + 'px';
if ( parseInt(first.style.marginLeft) <= -(nodeSize) ) {
first.style.marginLeft = '0px';
this.container.removeChild(first);
this.container.appendChild(first);
}
setTimeout('document.getElementById(\'' + this.container.id + '\').Scroller.scroll()', this.speed);
}
setTimeout('document.getElementById(\'' + ulId + '\').Scroller.scroll()', this.speed);
}
</script>
<style>
#scroller
{
PADDING-RIGHT: 0px;
LIST-STYLE: none none outside;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
PADDING-TOP: 0px;
HEIGHT: 57px;
TEXT-ALIGN: center
}
#scroller LI
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 15px;
FLOAT: left;
PADDING-BOTTOM: 3px;
MARGIN: 0px;
WIDTH: 130px;
PADDING-TOP: 3px;
HEIGHT: 57px
}
</style>
put this code in body:
<ul id="scroller"><li><img src="http://www.blogger.com/img1.jpg" width="130" border="0" /> <li><img src="http://www.blogger.com/img2.jpg" width="130" border="0" /> <li><img src="http://www.blogger.com/img3.jpg" width="130" border="0" /></li><li><img src="http://www.blogger.com/img4.jpg" width="130" border="0" /> <li></li></ul>
<script language="javascript" type="text/javascript">scrolling('scroller', 60);</script>
and put the javascript and style in head
<script language="javascript">
function scrolling(ulId, speed)
{
this.container = document.getElementById(ulId);
this.container.Scroller = this;
this.speed = speed;
this.scroll = function()
{
var c = this.container.firstChild;
var first = null;
while (c)
{
if (c.tagName == 'LI')
{ first = c; break; }
c = c.nextSibling;
}
var nodeSize = 78;
var px = 0;
nodeSize = first.clientWidth;
if (first.style.marginLeft != ''){
px = parseInt(first.style.marginLeft);
}
first.style.marginLeft = ( px - 2 ) + 'px';
if ( parseInt(first.style.marginLeft) <= -(nodeSize) ) {
first.style.marginLeft = '0px';
this.container.removeChild(first);
this.container.appendChild(first);
}
setTimeout('document.getElementById(\'' + this.container.id + '\').Scroller.scroll()', this.speed);
}
setTimeout('document.getElementById(\'' + ulId + '\').Scroller.scroll()', this.speed);
}
</script>
<style>
#scroller
{
PADDING-RIGHT: 0px;
LIST-STYLE: none none outside;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
PADDING-TOP: 0px;
HEIGHT: 57px;
TEXT-ALIGN: center
}
#scroller LI
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 15px;
FLOAT: left;
PADDING-BOTTOM: 3px;
MARGIN: 0px;
WIDTH: 130px;
PADDING-TOP: 3px;
HEIGHT: 57px
}
</style>

