Question

关于图片滚动JS代码速度的问题

代码如下：

<div id=demo style="OVERFLOW: hidden; WIDTH:900px; padding-top:13px; padding-bottom:13px; ">
<table cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<tr>
<td id=demo1 vAlign=top>

<table border="0" cellspacing="0" cellpadding="5" width="100%">
<tr>

<td width="210" align="center" class="zuoping"><p><a href="/products/110.html" target="_blank"><img class='pic1' src='/products/UploadFiles_4306/201012/2010120920484462.jpg' width='150' height='120' border='0'></a><br />
<a href="/products/110.html" target="_blank">雕刻工程</a></p></td>

<td width="210" align="center" class="zuoping"><p><a href="/products/109.html" target="_blank"><img class='pic1' src='/products/UploadFiles_4306/201012/2010120920475537.jpg' width='150' height='120' border='0'></a><br />
<a href="/products/109.html" target="_blank">彩绘工程4</a></p></td>

</tr>
</table>

</td>
<td id=demo2 vAlign=top></td>
</tr>
</table>
</div>
<SCRIPT language=javascript type=text/javascript>
var speed3=1//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>

var speed3=1//速度数值越大速度越慢
数值已经设为最小的1了，感觉图片滚动的还不够快，如果还想提高图片滚动的速度该怎么办？ 代码该如何修改？

Answer 1

speed 和 demo.scrollLeft++ 共同决定了 滚动的速度
speed最小为1,单位是ms/

demo.scrollLeft++就是 demo.scrollLeft=demo.scrollLeft+1,即每1ms滚动1像素.

可以改成demo.scrollLeft= demo.scrollLeft+10 或 demo.scrollLeft+=10
10也算速度,只是这个数太大滚动就不平滑了

----------------------------------
还有这里 if(demo2.offsetWidth-demo.scrollLeft<=0) 也有问题的.
和 demo比图片表格还宽就没得滚的了.

相同问题 见这里:http://tieba.baidu.com/f?kz=1072216913

改好的代码:
--------------------------------------
<div id=demo style="OVERFLOW: hidden; WIDTH:500px; padding-top:13px; padding-bottom:13px; ">
<table cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<tr>
<td id=demo1 vAlign=top>

<table border="0" cellspacing="0" cellpadding="5" width="100%">
<tr>

<td width="210" align="center" class="zuoping"><p><a href="/products/110.html" target="_blank"><img class='pic1' src='/products/UploadFiles_4306/201012/2010120920484462.jpg' width='150' height='120' border='0'></a><br />
<a href="/products/110.html" target="_blank">雕刻工程</a></p></td>

<td width="210" align="center" class="zuoping"><p><a href="/products/109.html" target="_blank"><img class='pic1' src='/products/UploadFiles_4306/201012/2010120920475537.jpg' width='150' height='120' border='0'></a><br />
<a href="/products/109.html" target="_blank">彩绘工程4</a></p></td>

</tr>
</table>

</td>
<td id=demo2 vAlign=top></td>
</tr>
</table>
</div>
<SCRIPT language=javascript type=text/javascript>
var speed3=1;
demo2.innerHTML=demo1.innerHTML
function Marquee(){
document.title=[demo.scrollLeft,demo.scrollWidth,demo.clientWidth];
if(demo.scrollLeft>=demo.scrollWidth-demo.clientWidth)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft+=10
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>

追问

速度确实是快了，但是滚动确实很不平滑，有没有既平滑又快的代码呢？ 可以追加50分！ 谢谢了！

追答

要平滑的话只能再把那个10改小一点,不过就又慢了.
延时1ms已经是最小单位了,没有办法了,

要想很平滑的话,改用flash做个外壳吧~

Answer 2

<div id=demo onmouseover="ee()" onmouseout="ww()" style="OVERFLOW:scroll; position:relative; WIDTH:900px; height:180px; padding-top:13px; padding-bottom:13px; ">
<div id="ss" style=" position:absolute;">
<table id="tb" cellspacing=0 cellpadding=0 align=left border=0 cellspace="0">
<tr>
<td id=demo1 valign=top><table border="0" cellspacing="0" cellpadding="5" width="100%">
<tr>
<td width="210" align="center" class="zuoping"><p><a href="/products/110.html" target="_blank"><img class='pic1' src='/products/UploadFiles_4306/201012/2010120920484462.jpg' width='150' height='120' border='0' /></a><br />
<a href="/products/110.html" target="_blank">雕刻工程</a></p></td>
<td width="210" align="center" class="zuoping"><p><a href="/products/109.html" target="_blank"><img class='pic1' src='/products/UploadFiles_4306/201012/2010120920475537.jpg' width='150' height='120' border='0' /></a><br />
<a href="/products/109.html" target="_blank">彩绘工程4</a></p></td>
</tr>
</table></td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
</div>
<SCRIPT language=javascript type=text/javascript>
var speed3=5//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML;
var k=0;
function Marquee(){
ss.style.width=demo2.offsetWidth;
ss.style.height=demo2.offsetHeight;
k+=speed3;
if(ss.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=ss.offsetWidth
else{
ss.style.left=k+'px';
}
}
function ww()
{clearInterval(MyMar)}
function ee()
{MyMar=setInterval(Marquee,speed3)}
</SCRIPT>

这个快了。

Answer 3

这里有一个无缝滚动效果
方向可以自己设置
可以设置定高定宽停顿
你把文字改成图片就行
里面有源码可以参考