Latest News

Home » 網站架設網頁設計教學 » 精彩圖片之間不間斷迴圈卷動、滑鼠經由停止、點擊放大

精彩圖片之間不間斷迴圈卷動、滑鼠經由停止、點擊放大

精彩圖片之間不間斷迴圈卷動、滑鼠經由停止、點擊放大

完整代碼如下:

大家可以複製到Dreamweaver裡進行編輯

<div id="test" style="text-align:center"></div>

<DIV align=center id=demo style="OVERFLOW: hidden; WIDTH: 500px; HEIGHT: 87px"
align=center>
<TABLE cellSpacing=0 cellPadding=0 align=left border=0
cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top><table width="500" border="0" align="center" cellpadding="1" cellspacing="1">
<tr>
<td width="120"><img src="http://圖片網址/2007730114350852.jpg" width="68" height="68" border="0" onclick="test(this)"></td>
<td width="10"></td>
<td width="120"><img src="http://圖片網址/2007730114350141.jpg" width="68" height="68" onclick="test(this)"></td>
<td width="10"></td>
<td width="120"><img src="http://圖片網址/2007730114350308.jpg" width="68" height="68" onclick="test(this)"></td>
<td width="10"></td>
<td width="120"><img src="http://圖片網址/2007730114421279.jpg" width="68" height="68" onclick="test(this)"></td>
<td width="10"></td>
<td width="120"><img src="http://圖片網址/2007730114421119.jpg" width="68" height="68" onclick="test(this)"></td>
<td width="10"></td>
<td width="120"><img src="http://圖片網址/2007730114421360.jpg" width="68" height="68" onclick="test(this)"></td>
<td width="10"></td>
<td width="120"><img src="http://圖片網址/2007730114350141.jpg" width="68" height="68" onclick="test(this)"></td>
<td width="10"></td>
<td width="120"><img src="http://圖片網址/2007730114350882.jpg" width="68" height="68" onclick="test(this)"></td>

</tr>
</table></TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=5
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

function test(_this) {
document.getElementById("test").innerHTML = "<img src='" + _this.src + "' width='500px' height='400px'/>";
}

</SCRIPT>

About

發佈留言