图片无缝拼接横向滚动代码

图片来源：网络

编辑制作：黑龙江省黑河市瑷珲中学 马文生

2018-06-26

效果▲  代码▼

图片无缝拼接横向滚动代码：

-----------------------------------------------------------------------------------------------------------------------------------------------------

<DIV align=center>

<MARQUEE  behavior=alternate width=显示窗宽度 height=显示窗高度 scrollAmount=2 >

<TABLE  height=单张图片高度 width=所有图片宽度总和 cellSpacing=0 cellPadding=0 border=0 >

<TBODY>

<TR>

<TD width=图片1宽度 height=图片1高度><IMG src="图片1地址" width=图片1宽度 height=图片1高度></TD>

<TD width=图片2宽度 height=图片2高度><IMG src="图片2地址" width=图片2宽度 height=图片2高度></TD>

<TD width=图片3宽度 height=图片3高度><IMG src="图片3地址" width=图片3宽度 height=图片3高度></TD>

<TD width=图片4宽度 height=图片4高度><IMG src="图片4地址" width=图片4宽度 height=图片4高度></TD>

<TD width=图片5宽度 height=图片5高度><IMG src="图片5地址" width=图片5宽度 height=图片5高度></TD>

. . .   . . .

<TD width=图片n宽度 height=图片n高度><IMG src="图片n地址" width=图片n宽度 height=图片n高度></TD>

</TR></TBODY></TABLE></MARQUEE></DIV>

------------------------------------------------------------------------------------------------------------------------------------------------------

代码说明：

①align=center ——是居中显示；另外还有align=left——是左对齐显示；align=right——是右对齐显示。

②MARQUEE——为滚动代码。

③behavior=alternate——是滚动属性，用来控制滚动方向的，如果不写就默认从右向左滚动。可以更换为其它滚动属性（在下面）。

④scrollAmount=2——是用来控制滚动速度的，可以调整，值越大，速度越快，一般设置在1-3范围内比较好。

⑤width=显示窗宽度 height=显示窗高度——是图片滚动时页面显示区域，建议尽可能大一些。

⑥cellSpacing=0 cellPadding=0 border=0 ——表示图片拼接无框无缝。

代码的使用：

①如果你只有图片，而没有该图片链接地址，首先要将该图片上传，以获取图片地址。

②根据图片更换滚动属性代码（上面蓝字），以确定滚动方向，可参照下面【滚动属性】进行设置。

③要拼接的图片规格最好是一致的，然后根据图片的大小确定显示窗宽度和高度。

④把上面代码中的"图片地址"换成你自己的图片链接地址即可。在编辑代码时，请注意代码中的空格，切勿丢掉！

附：【滚动属性】

向左：direction=left

向右：direction=right

左右来回：behavior=alternate

从右向左一圈一圈绕着走：behavior=scroll

从右向左滚动一次就停止 ：behavior=slide

瑷珲马文生书馆 欢迎您！

图片无缝拼接纵向滚动代码【 点击欣赏！】

图片无缝拼接横向、纵向滚动通用代码【新浪、网易博客等通用】【点击欣赏！】