奇花异草--用源代码做的幻灯片播放器-Ⅱ（草稿）|老小孩讲述

【原创】奇花异草--用源代码做的幻灯片播放器-Ⅱ（草稿）

导语：

修改

字体调整：大 | 中 | 小

发表于2011年05月25号 11点阅读 7144 评论45 点赞1 ©著作权归作者所有

摘要：这是《花儿朵朵》幻灯片播放器的简化版。播放控制面板更简单，采用《当前片号 | 总片数》两节数字显示，另有一个按钮“播放”、一个按钮“暂停”。

奇花异草

--用源代码做的幻灯片播放器-Ⅱ

上篇博客介绍了有一个播放条的幻灯播放器。几位网友用这代码制作了幻灯片，有的在一个幻灯里用了十几二十张照片，播放条数字显示了长长的一串，显得有些累赘。因此习之再推出一个简化版，将数字段压缩，只显示《当前片号 | 总片数》两节文字。那么即使有99张也不怕了。两个方向按钮改成一个“播放”、一个“暂停”，点击暂停可以停在当前的片上，再点击“播放”，恢复播放循环。在某一张切换结束后点击“播放”，可以立即开始下一张的切换。

代码与上篇“花儿朵朵”的相类似，只是html代码里有关播放条部分有变化，再就是换了一个实施播放的JS程序脚本。

现在播放条是两个按钮加两节数字，总长度是定值（下面的例子是100px），因此在“编辑”状态能全部显示，这样对调整播放条的位置就比较直观了。

现在借用娟子老师的“奇花异草”的素材做成下面的幻灯片，共有29张照片。

幻灯片实例：娟子老师的摄影作品《奇花异草》

00|00

speed = 6000; transType = 23; slideimages = new Array() var dd = 0 slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706131.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706170.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706223.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706223.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706305.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706347.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706384.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706422.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706461.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706506.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706561.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706597.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707081.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707113.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707156.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707206.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707237.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707294.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707341.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707399.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707439.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707471.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707519.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150707552.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706267.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150705590.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706021.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706059.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u7025/2011/05/15/blog_201105150706095.jpg"

这个播放器的代码请点击下面的文件，在浏览器里打开后，请再点击“查看”--“源代码”--就能打开一个新的记事本，里面就是完整的代码（即使图片不显示，也可以查看源文件得到源代码。），如果您能用记事本，那么就可以直接用“记事本”-“文件”-“打开”-在地址框里粘贴这个地址，打开htm文件，看到完整的源代码。在记事本里可以直接修改和替换，再将结果拷贝到老小孩的编辑器里（源码）。

《奇花异草》的代码：http://xizhi.200vip.com/other/2011/奇花异草源代码.htm

与《花儿朵朵》一样，代码里要替换：幻灯片照片的地址及幻灯片的大小。由于这个播放条里的内容（按钮和数字）都是固定的，因此播放条的位置就容易调整，它们在一个绝对定位的div标签内：

《div style="position:absolute;top:400px;left:650px;"》　

现在的数值是距离照片左上角左650px，高400px。在编辑器的文本状态能看到它的实际位置，可以根据需要修改数值。

另一个要关心的是显示数字的颜色。例子里的照片大部分背景比较暗，因此用了白色的数字。当照片背景比较浅时，白色的数字就看不太清楚了，那么就将数字的颜色调深：

下面是现在的设置：

style="font-weight: bolder; font-size: 16px; color: #f0f0f0;font-family: 宋体;"

其中 color:#f0f0f0 ;就是现在的浅灰色，您可以改成蓝的：#0000ff; 或黑的：#202020;

如果觉得按钮不好也可以替换，尺寸为20×20，如果尺寸放大，还需要重新排列它们的位置。这对于略懂代码的朋友不是难事。

为了更直观地使用这套代码，习之做了这套代码在老小孩编辑器里的截图。里面用颜色表明了应该替换的位置。这是经过编辑器编译的代码，各种标签和属性的位置与原始代码不一样。

将原始代码拷贝到老小孩的编辑器的“源码”状态里，再点击“源码”回到“文本编辑”状态，就能看到一张照片和按钮，编辑器已经完成了编译。这时再点击“源码”，再一次进入“源码”状态，编辑框里看到的代码排列就与习之给出的“截图”一样了，只是截图里只保留了5张图，而编辑器里是全的。

习之想试试看，这样做是否对寻找需要修改的代码有帮助。请发现问题的朋友能给习之反馈。谢谢！