最近有同學問我要製作一個垂直相片跑馬燈要怎麼製作
我們一般最常看到的就是 垂直文字跑馬燈
如果現在要改成圖片的話 就要修正一下javascript語法了
只要將下列語法 貼到<body></body>標籤內 即可以看到
---------------------------------------------------------
<script>
scrollheight = 150 ; //卷軸高
lineNum = 1;
boardheight=scrollheight * lineNum; //跑馬燈高
scrollwidth=500; //跑馬燈寬
scrollTimeOut = 10; //移動時間
scrollStopTime = 200 //停留時間
doScroll = true //是否要跑
scrollCountTime = 0; //目前時間
offSet = scrollheight; //偏移量
startSetp = 0;
function ScrollBluezz(){
thisSc = document.all['scArea'];
thisSc.style.width = scrollwidth;
thisSc.style.height = boardheight;
thisSc.style.overflowX = "hidden";
thisSc.style.overflowY = "hidden";
thisSc.scrollTop = 0
setInterval("scrollUpBluezz()",scrollTimeOut)
}
function scrollUpBluezz(){
thisSc = document.all['scArea'];
if (doScroll == false) return //不跑
offSet ++
if (offSet == scrollheight + 1) {
scrollCountTime ++
offSet --
if (scrollCountTime == scrollStopTime) {
offSet = 0
scrollCountTime = 0
}
}else {
startSetp = thisSc.scrollTop + (scrollheight * lineNum);
thisSc.scrollTop ++
if (startSetp == thisSc.scrollTop + (scrollheight * lineNum)) {
thisSc.scrollTop = scrollheight * (lineNum-1)
thisSc.scrollTop ++
}
}
}
</script>
<div id="scArea">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td height="150">
<img src="http://p.bluezz.tw/s_564_1110.jpg" height="150"></td>
<td><a href="http://bluezz.tw/c.php?id=564">猴探井遊憩區-觀看夜景好去處</a></td>
</tr>
<tr><td height="150"><img src="http://p.bluezz.tw/s_702_1214.jpg" height="150"></td>
<td><a href="http://bluezz.tw/c.php?id=702">百果山風景區-登山、夜景</a></td>
</tr>
<tr>
<td height="150"><img src="http://p.bluezz.tw/s_635_1279.jpg" width="200" height="150"></td>
<td height="50"><a href="http://bluezz.tw/c.php?id=635">銀行山-牧場,夜景</a></td>
</tr>
<tr>
<td height="150"><img src="http://p.bluezz.tw/s_564_1110.jpg" height="150"></td>
<td><a href="http://bluezz.tw/c.php?id=564">猴探井遊憩區-觀看夜景好去處</a></td>
</tr>
</table>
</div>
<script>ScrollBluezz();</script>
留言列表
