分享

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

 瑷珲马文生书馆 2018-08-26
 
图片无缝拼接横向滚动代码

图片来源:网络


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


瑷珲马文生书馆 欢迎您!

图片无缝拼接横向滚动代码 - 瑷珲马文生书馆图片无缝拼接纵向滚动代码【 点击欣赏!】

 

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约