以前写过一个jquery的左右滚动,现在想着弄一个js的无缝滚动。
网上下的 一个例子,觉得滚动很不稳,慢慢就变快了。下边是我修改过的代码:
js:
<script>
var speed=20//速度数值越大速度越慢
var www_qpsh_com2=null;
var www_qpsh_com1=null;
var www_qpsh_com=null;
var MyMar=null;
function load(){
www_qpsh_com2 = document.getElementById("www_qpsh_com2");
www_qpsh_com1 = document.getElementById("www_qpsh_com1");
www_qpsh_com = document.getElementById("www_qpsh_com");
var len = document.getElementById("table").getElementsByTagName("td").length;
if(len>4){//当图片中少于4张图片时,不滚动,原因是当图片总宽度小于显示框的宽度时,不需要滚动。
www_qpsh_com2.innerHTML=www_qpsh_com1.innerHTML;//将1中的内容复制到这个id,以实现无缝。
Marquee();
}
}
function over(){
clearTimeout(MyMar);
}
function out(){
MyMar = setTimeout("Marquee()",speed);
}
function Marquee(){
if(www_qpsh_com2.offsetWidth-www_qpsh_com.scrollLeft<=0)
www_qpsh_com.scrollLeft-=www_qpsh_com1.offsetWidth
else{
www_qpsh_com.scrollLeft++;
}
MyMar = setTimeout("Marquee()",speed);
}
</script>
jsp页面:
<div id=www_qpsh_com onmouseout="out()">
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=www_qpsh_com1 valign=top>
<table border=0 cellpadding=0 cellspacing=0 id="table">
<tr>
<td>
<img alt="js图片连续向左滚动代码" border=0 src="http://www.sjzxhcourt.org/resources/40/20130704163002927.jpg" width=157 height=121 hspace=2、>
</td>
<td>
<img alt="js图片连续向左滚动代码" border=0 src="http://www.sjzxhcourt.org/resources/40/20130704163002927.jpg" width=157 height=121 hspace=2、>
</td>
<td>
<img alt="js图片连续向左滚动代码" border=0 src="http://www.sjzxhcourt.org/resources/40/20130704163002927.jpg" width=157 height=121 hspace=2、>
</td>
<td>
<img alt="js图片连续向左滚动代码" border=0 src="http://www.sjzxhcourt.org/resources/40/20130704163002927.jpg" width=157 height=121 hspace=2、>
</td>
<td>
<img alt="js图片连续向左滚动代码" border=0 src="http://www.sjzxhcourt.org/resources/40/20130704163002927.jpg" width=157 height=121 hspace=2、>
</td>
</tr>
</table>
</td>
<td id=www_qpsh_com2 valign=top></td>
</tr></table>
</div>
进×××流: 178483774