旋转相册（附代码和编制说明）

【代码作品】旋转相册（附代码和编制说明）  

打开后如发现图片没有全显现，请刷新一下页面。

每当外出旅游总会拍一些人物风景照片以作留念，回家后冲印出照片后放在相册中观看不太方便，传到网络相册中观看同样不能一目了然，为此，本博用代码设计制作了这一旋转式动态艺术相册，四周是同步旋转的跑马相片，中间是幻灯相片，这样不但可以同时看很多相片，还可以享受到自己动手制作出生动活泼相册的乐趣及别有风味的观看效果，对代码爱好者来说实属是一道玩博风景线。现将代码和制作方法提供给需要的博友。         本例共用了40张风景图片，当然是可以多放的啦，不过改变相片数量时，横竖相片数量也要做相应调整（可按本例的数量比例来增减）；中间幻灯式建议放置十张精品相片。         朋友在制作过程中有什么问题欢迎交流，祝朋友们玩得开心！ 代    码 <DIV align=center> <TABLE style="BORDER-BOTTOM: indigo 10px ridge; BORDER-LEFT: indigo 10px ridge; BACKGROUND-COLOR: #ffcc00; BORDER-TOP: indigo 10px ridge; BORDER-RIGHT: indigo 10px ridge" cellSpacing=0> <TBODY> <TR> <TD> <TABLE border=3 cellSpacing=4 borderColor=red cellPadding=0 width=829 bgColor=#000000> <TBODY> <TR> <TD> <TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" align=center height=560> <TBODY> <TR> <TD colSpan=2 align=middle> <MARQUEE height=140 behavior=alternate width=584 loop=infinite scrollAmount=3 scrollDelay=95> <TABLE border=0 cellSpacing=0 cellPadding=1 bgColor=#000000> <TBODY> <TR> <TD><IMG title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="上横行相片1地址" height=140><IMG style="MARGIN-LEFT: 1px"title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="上横行相片2地址" height=140><IMG style="MARGIN-LEFT: 1px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="上横行相片3地址" height=140><IMG style="MARGIN-LEFT: 1px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="上横行相片4地址" height=140><IMG style="MARGIN-LEFT: 1px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="上横行相片5地址" height=140><IMG style="MARGIN-LEFT: 1px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="上横行相片6地址" height=140></TD></TR></TBODY></TABLE></MARQUEE> <DIV style="MARGIN-TOP: -8px"></DIV></TD> <TD rowSpan=2 width=234 align=middle> <MARQUEE style="MARGIN-TOP: 1px" direction=up height=420 behavior=alternate width=234 scrollAmount=3> <TABLE border=0 cellSpacing=0 cellPadding=1 bgColor=#000000> <TBODY> <TR> <TD width=234><IMG title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="右竖行相片1地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="右竖行相片2地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="右竖行相片3地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="右竖行相片4地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="右竖行相片5地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="右竖行相片6地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="右竖行相片7地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="右竖行相片8地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="右竖行相片9地址" width=234></TD></TR></TBODY></TABLE></MARQUEE> <DIV style="MARGIN-TOP: -7px"></DIV></TD></TR> <TR> <TD rowSpan=2 width=234 align=middle> <MARQUEE style="MARGIN-TOP: 0px" direction=down height=420 behavior=alternate width=234 scrollAmount=3> <TABLE border=0 cellSpacing=0 cellPadding=1 bgColor=#000000> <TBODY> <TR> <TD width=234><IMG title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="左竖行相片1地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="左竖行相片2地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="左竖行相片3地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="左竖行相片4地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="左竖行相片5地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="左竖行相片6地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="左竖行相片7地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="左竖行相片8地址" width=234><IMG style="MARGIN-TOP: -6px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="左竖行相片9地址" width=234></TD></TR></TBODY></TABLE></MARQUEE> <DIV style="MARGIN-TOP: -7px"></DIV></TD> <TD height=278 background=http://image55.360doc.com/DownloadImg/2012/10/3010/27872527_32.jpg width=350 cellPadding="0" cellSpacing="0"><EMBED height=280 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=350 src=http://st.blog.163.com/bin/pixviewer.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" flashvars="pics=幻灯相片1地址|幻灯相片2地址|幻灯相片3地址|幻灯相片4地址|幻灯相片5地址|幻灯相片6地址|幻灯相片7地址|幻灯相片8地址|幻灯相片9地址|幻灯相片10地址&borderwidth=350&borderheight=280" allowNetworking="internal"> <DIV style="MARGIN-TOP: -7px"></DIV></TD></TR> <TR> <TD height=140 colSpan=2 align=middle> <MARQUEE style="MARGIN-TOP: -1px" direction=right height=140 behavior=alternate width=584 loop=infinite scrollAmount=3 scrollDelay=95> <TABLE border=0 cellSpacing=0 cellPadding=1> <TBODY> <TR> <TD><IMG title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="下横行相片1地址" height=140><IMG style="MARGIN-LEFT: 1px"title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="下横行相片2地址" height=140><IMG style="MARGIN-LEFT: 1px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="下横行相片3地址" height=140><IMG style="MARGIN-LEFT: 1px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="下横行相片4地址" height=140><IMG style="MARGIN-LEFT: 1px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="下横行相片5地址" height=140><IMG style="MARGIN-LEFT: 1px" title="静中有动的仙居http://syb2009a.blog.163.com/" alt="旋转相册 - 静中有动 -  静中有动的涂鸦" src="下横行相片6地址" height=140></TD></TR></TBODY></TABLE></MARQUEE> <DIV style="MARGIN-TOP: -6px"></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

转发至微博