图片不间断滚动1

以前我们用网页代码（marquee）制作图片移动 前面都会有一段空白 不能连续无间隙移动 （用JS代码除外）

前几天QQ空间看到面壁老师的一个介绍 解决了这个问题：

拆解“字幕特效不间断滚动图片”_无js语言

http://mymc.sc.cn/zmtx.htm

试着做了一个 用了10张图片 高相同 都是500   宽是任意的 用代码让它从左到右不停滚动

全部代码如下：

<center>

<marquee direction="right" scrollamount="2"  style="position: relative; left: 0; top: 0; width: 650; height: 500">

<div style="position: relative; left: 0; top: 0; width: 5380; height: 500">

<table border="0" style="position: absolute; left: -1241; top: 0; width:7271; height: 500" cellspacing="0" cellpadding="0">

<tr>

<td style="width:706px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_1.jpg">　</td>

<td style="width:535px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_2.jpg">　</td>

<td style="width:703px"background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_3.jpg">　</td>

<td style="width:703px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_4.jpg">　</td>

<td style="width:671px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_5.jpg">　</td>

<td style="width:375px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_6.jpg">　</td>

<td style="width:359px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_7.jpg">　</td>

<td style="width:721px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_8.jpg">　</td>

<td style="width:544px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_9.jpg">　</td>

<td style="width:713px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_10.jpg">　</td>

<td style="width:706px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_1.jpg">　</td>

<td style="width:535px" background="http://image27.360doc.com/DownloadImg/2011/04/1317/10885178_2.jpg">　</td>

</tr>

</table>

</div></marquee>

</center>

参考方法：

复制代码到记事本

上传图片 得到地址

逐一修改图片地址 图片宽度 （注意第二 第一张图片需要重复一次 放在前面 至于为什么这样 看教程）

要让图片不间断的播放 代码中下面几个数字是关键（加粗 ）

10张图片总宽度 ：6030  （图片多少都可以）

重复2张图片的宽度：706+535=1241  （看上面的代码 2.jpg  1.jpg 用到两次）

表格总宽：6030+1241=7271

窗口宽度：650

图片容器：6030-650=5830

根据你图片的情况 进行计算 然后到代码前部分对应位置进行数字替换

复制全部代码 到博客编辑源代码里 OK

代码不复杂 老师功夫深 障眼法用得好 让人看不出来破绽！

再做一个 用钱芳大姐8月旅游英国的照片 包括几张全景宽幅照片

除了上面所说需要修改的地方 这里图片高360代码也改

<center>

<marquee direction="right" scrollamount="2"  style="position: relative; left: 0; top: 0; width: 650; height:360">

<div style="position: relative; left: 0; top: 0; width: 6143; height:360">

<table border="0" style="position: absolute; left: -2117; top: 0; width:8910; height:360" cellspacing="0" cellpadding="0">

<tr>

<td style="width:1637px" background="UploadFiles/2010-12/10229866375.jpg">　</td>

<td style="width:480px" background="UploadFiles/2010-12/10229614239.jpg">　</td>

<td style="width:1205px" background="UploadFiles/2010-12/102210189013.jpg">　</td>

<td style="width:1575px" background="UploadFiles/2010-12/102210951327.jpg">　</td>

<td style="width:480px" background="UploadFiles/2010-12/102210939352.jpg">　</td>

<td style="width:1416px" background="UploadFiles/2010-12/102210282864.jpg">　</td>

<td style="width:1637px" background="UploadFiles/2010-12/10229866375.jpg">　</td>

<td style="width:480px" background="UploadFiles/2010-12/10229614239.jpg">　</td>

</tr>

</table>

</div></marquee>

</center>