以前寫過一個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.bkjia.com/uploads/allimg/131228/1423042950-0.jpg" width=157 height=121 hspace=2、>
</td>
<td>
<img alt="js圖片連續向左滾動代碼" border=0 src="http://www.bkjia.com/uploads/allimg/131228/1423042950-0.jpg" width=157 height=121 hspace=2、>
</td>
<td>
<img alt="js圖片連續向左滾動代碼" border=0 src="http://www.bkjia.com/uploads/allimg/131228/1423042950-0.jpg" width=157 height=121 hspace=2、>
</td>
<td>
<img alt="js圖片連續向左滾動代碼" border=0 src="http://www.bkjia.com/uploads/allimg/131228/1423042950-0.jpg" width=157 height=121 hspace=2、>
</td>
<td>
<img alt="js圖片連續向左滾動代碼" border=0 src="http://www.bkjia.com/uploads/allimg/131228/1423042950-0.jpg" width=157 height=121 hspace=2、>
</td>
</tr>
</table>
</td>
<td id=www_qpsh_com2 valign=top></td>
</tr></table>
</div>
本文出自 “IT邋遢員” 部落格,請務必保留此出處http://3795780.blog.51cto.com/3785780/1303320