臊子面:★★★照片走马灯式显示-源代码练习★★★

照片的走马灯显示
很多网友都会用HTML里的滚动字幕标签Marquee，并用这标签的平行、嵌套、滚动方向控制等技巧制作出精妙的动感画面。这个字幕标签有一个缺陷，它在滚动体显示完一次后会有一段空隙，然后显示下一遍。空隙的长度等于显示范围的宽度。在目前报道奥运会的网页上，特别是“金牌榜”一类，经常能看到照片的滚动显示，但它是无缝隙的，一张照片接着一张，周而复始，循环不息。那就是用JS代码做的滚动显示，为与Marquee相区别，我特称它为“走马灯式显示”。
下面是利用“一生平安”老师提供的“金牌榜”的素材，用“走马灯显示”代码，做成的奥运冠军榜，限于篇幅，实例里只放了12张照片，下面的用来拷贝的代码里只有四张照片。
实例：奥运金牌榜（中国军团第40∼51金）

第40金 李小鹏 男子双杠

第41金 邹 凯 男子单杠

第42金 陆春龙 男子蹦床

第43金 何冲男子跳水三米板

第44金 殷剑 女子帆板

第45金 吴静钰 女子 跆拳道

第46金 陈若琳 女子蹦床

第47金 张怡宁 女子乒乓

第48金 孟关良杨文军 皮艇

第49金 马琳 男子乒乓单打

第50金 邹市明 拳击48kg

第51金 张小平 拳击81kg

第40金 李小鹏 男子双杠

第41金 邹 凯 男子单杠

第42金 陆春龙 男子蹦床

第43金 何冲男子跳水三米板

第44金 殷剑 女子帆板

第45金 吴静钰 女子 跆拳道

第46金 陈若琳 女子蹦床

第47金 张怡宁 女子乒乓

第48金 孟关良杨文军 皮艇

第49金 马琳 男子乒乓单打

第50金 邹市明 拳击48kg

第51金 张小平 拳击81kg
这用源代码写的走马灯显示，代码也分两部分，HTML代码及JS代码。其中JS部分是经典的教科书式的代码。对于如何滚动的原理可以先不学它。我们只需了解要替换什么。里面供我们调整的只是滚动速度，现在是20，数字越小越快。在代码里保留了鼠标事件处理：鼠标移至滚动暂停；鼠标移开滚动继续。具体的代码不再详细的介绍了，在下面提供的源代码里有注释可参考。
而HTML代码是比较复杂的，它包括“走马灯”定位，显示范围，滚动体（被滚动的内容）等。
先说滚动体，一张照片及一行说明组成一个滚动体的单元，多个单元连在一起，组成滚动体。就是我们所要滚动显示的全部内容。
下面是本实例一个滚动单元的代码。黑字是代码，红字是要改的，蓝字是代码的注释。它包含于td标签和其内的一个表（table）,这表里需要替换的是：一张照片和一行文字；照片的宽与高。对初学的网友，最好是选同样大小的照片，这样每个显示单元的宽和高（width、height）都可以设置成相同，说明文字尽量短。这里只给了一行的位置。在代码里删除了“导航链接”功能部分。如果有十张照片要显示，那么就先写好一个单元，再拷贝成十套代码，一套一套的连在一起，以保证每个照片的设置都相同。然后替换每个单元里的地址及说明文字(在提供的供拷贝的代码里是四个单元)。

style="border-style:none" width="200" height="150" alt=""/>

第40金

上面是单张照片的设置：宽200px；照片间距10px；高150px；文字行高30px；那么就能算出这个单元总宽210px；总高180px。
下面是整个HTML代码的梯形结构图，为便于说明，每个单元只保留了它的td标签，内容用“单元号”代替。

上面的代码里需要修改的只是宽度和高度两项，在第一行的div标签里的宽度和高度设置是纲领性的，即走马灯在博客里的显示范围。本例中显示的宽度是3张照片的宽度，即210×3=630px。当然要根据博客总体排版的要求更改。高度就是照片和文字说明的总高，本例是180px。后面有两个分别称为总表和实体表里也有宽度设置，本例取值与显示宽度相等。但是它的实际宽度应该为单元宽度×照片张数。由于表格的宽度会被内容撑大，为了减少麻烦，就设置成与显示宽度相等。高度就默认为内容高度。
如果只有一张长照片，要无缝隙滚动播放，那么显示宽度一定要小于或等于照片宽度，并将显示单元里的照片间隙设置成0。
上面的介绍似乎很复杂，但都是解释性的文字，实际需要改的，也只有显示宽度、高度；照片的宽度、高度；再就是照片地址和说明词。应该也算是简单的了。
补充使用说明：
老小孩网站的朋友，在用这走马灯前，事先要准备好照片的网络地址，最好是大小都相同。然后打开博客的“写日记”，点击编辑框上的工具里的“源代码”，进入代码编辑状态，将下面的代码拷贝到编辑框里，修改显示宽度和高度，并替换照片的地址和文字说明。都做好后，再点“源代码”回到文本编辑状态。这时，能看到在显示宽度内的照片。点击编辑工具“预览”，才能看到照片的无缝滚动效果。
凡是有JS代码的幻灯播放器，或者这个走马灯，对初学着来说，一篇博客里同类的播放器，只能放一个。
供拷贝的源代码
这是应网友要求，做成胶片式的背景。