javascript 无间,间隔停顿滚动
<style>
#ul li{ height:20px; line-height:20px;}
.scroll{font-size:0px;width:300px;overflow:hidden;height:20px;white-space:nowrap;}
.scroll ul,.scroll li{margin:0;padding:0;display:inline-block;zoom: 1;*display: inline;}
.scroll li{width:100px;font-size:12px;text-align:center;}
</style>
<ul id="ul" style="height:20px; overflow:auto;">
<li><span class="sxnotice_icon2">1</span> <span class="sxnum"><em>$todayposts</em></span></li>
<li><span class="sxnotice_icon2">2</span> <span class="sxnum"><em>$postdata[0]</em></span></li>
<li><span class="sxnotice_icon2">3</span> <span class="sxnum"><em>$totalmembers</em></span></li>
<li><span class="sxnotice_icon2">4</span> <span class="sxnum"><em>$todayposts</em></span></li>
</ul>
<div class="scroll" >
<ul id="ul1">
<li><span class="sxnotice_icon2">1</span> <span class="sxnum"><em>$todayposts</em></span></li>
<li><span class="sxnotice_icon2">2</span> <span class="sxnum"><em>$postdata[0]</em></span></li>
<li><span class="sxnotice_icon2">3</span> <span class="sxnum"><em>$totalmembers</em></span></li>
<li><span class="sxnotice_icon2">4</span> <span class="sxnum"><em>$todayposts</em></span></li>
</ul>
</div>
<div class="scroll" >
<ul id="ul2">
<li><span class="sxnotice_icon2">1</span> <span class="sxnum"><em>$todayposts</em></span></li>
<li><span class="sxnotice_icon2">2</span> <span class="sxnum"><em>$postdata[0]</em></span></li>
<li><span class="sxnotice_icon2">3</span> <span class="sxnum"><em>$totalmembers</em></span></li>
<li><span class="sxnotice_icon2">4</span> <span class="sxnum"><em>$todayposts</em></span></li>
</ul>
</div>
<script>
var scroll=function(obj,dire)
{
//dire为v时是垂直滚动,为h时是水平滚动
this.scrollStep=2;//移动步长,越大越快
this.stayTime=3000;//停留时间,越大时间越长
this.scrollSpeed=20;//移动一屏的速,越大越慢
this.row;//移动一次的跨度
this.rowCount=1;//移动一次的节点数
this.temp=0;
obj.innerHTML+=obj.innerHTML;
this.child=obj.getElementsByTagName('li');
var self=this;
this.start=function()
{
this.scrollId=setTimeout(function(){eval('self.'+dire+'Scroll()')},this.stayTime);
}
this.vScroll=function()
{
if(this.temp<this.row)
{
this.temp+=this.scrollStep;
if(this.temp>this.row) this.temp=this.row;
obj.scrollTop=this.temp;
this.scrollId=setTimeout(function(){self.vScroll();},this.scrollSpeed);
}
else
{
this.temp = 0;
for(i=(this.rowCount-1);i>=0;i--)
{
obj.appendChild(this.child[i]);
}
obj.scrollTop = 0;
this.scrollId=setTimeout(function(){self.vScroll();},this.stayTime);
}
}
this.hScroll=function()
{
if(this.temp<this.row)
{
this.temp+=this.scrollStep;
if(this.temp>this.row) this.temp=this.row;
obj.parentNode.scrollLeft=this.temp;
this.scrollId=setTimeout(function(){self.hScroll();},this.scrollSpeed);
}
else
{
this.temp = 0;
for(i=(this.rowCount-1);i>=0;i--)
{
obj.appendChild(this.child[i]);
}
obj.parentNode.scrollLeft = 0;
this.scrollId=setTimeout(function(){self.hScroll();},this.stayTime);
}
}
this.hrScroll=function()
{
var childLen=this.child.length;
if(this.temp>0)
{
this.temp-=this.scrollStep;
if(this.temp>=this.row) this.temp=0;
obj.parentNode.scrollLeft=this.temp;
this.scrollId=setTimeout(function(){self.hrScroll();},this.scrollSpeed);
}
else
{
for(i=0;i<=this.rowCount-1;i++)
{
obj.insertBefore(this.child[childLen-1],this.child[0]);
}
this.temp = this.row;
obj.parentNode.scrollLeft = this.row;
this.scrollId=setTimeout(function(){self.hrScroll();},this.stayTime);
}
}
obj.onmouseover=function()
{
clearTimeout(self.scrollId);
}
obj.onmouseout=function()
{
self.scrollId=setTimeout(function(){eval('self.'+dire+'Scroll()')},this.stayTime);
}
}
window.onload=function()
{
var myvScroll = new scroll(document.getElementById('ul'),'v');
myvScroll.row=40;
myvScroll.rowCount=2;
myvScroll.start();
var myScroll=new scroll(document.getElementById('ul1'),'h');
myScroll.row=100;
myScroll.rowCount=1;
myScroll.start();
var myhr=new scroll(document.getElementById('ul2'),'hr');
myhr.row=200;
myhr.rowCount=2;
myhr.start();
}
</script>
