|
在习之的博客里曾经介绍过几款用源代码制作的幻灯片播放器。现在这款播放器的特点是有一个简单的控制面板（下称播放条）。左右有两个控制循环方向的按钮，中间显示的是幻灯片的片号，遮罩成红色的是正在播放的片号。点击片号，可以使播放器暂停循环，必须再点击左右的按钮才能恢复循环。 这款播放器适用于大小一致的照片集中显示，避免在博客上显示长长的一串照片，读者必须拉动滚动条才能浏览到所有的照片。通过暂停的功能可以仔细观看某些照片， 特别是在画面上有较多文字需要阅读时，用“暂停”功能更显必要，因此也适合播放一些诗画作品。 习之借用“好心情”老师的博客“花儿朵朵迎五一”里的摄影作品作为幻灯片，制作成一个实例，先在习之博客的“交流和互动”栏目上发表，根据部分网友试用的实践，又做了一些改进。在此感谢朋友们提供的宝贵意见和建议。 下面是幻灯“花儿朵朵”的实例和含有注释的源代码。
<table cellspacing="0" cellpadding="0" width="800" align="center" border="0" bgcolor="#cccccc"> <tbody> <tr> <td><div style="position:relative;top:0px;left:0px;"><!--这是一个相对定位层，以确定绝对定位的原点，相对层里放的就是下面img里的图，JS程序会定时改变图的地址和切换方式，达到幻灯效果--> <img style="filter: RevealTrans(Transition=18,Duration=2)" height="517" alt="" width="800" id="slide" src="http://www.oldkids.cn/upload/9000/u6727/2011/05/01/tblog_201105010742065.jpg" /><div style="position:absolute;top:460px;left:560px;"><!--这个绝对定位层放下面的table，里面是控制按钮和片号数字，这个层里的left、top数据是控制按钮的位置，原点是图的左上角--> <table cellspacing="0" cellpadding="0" border="0" align="center" ><tbody><tr> <td width="14px"><img id="LT_1" src="http://image76.360doc.com/DownloadImg/2014/07/3108/43877079_2.gif" width="14" height="16" onclick="diretLT();" style="cursor:hand;" title="左循环"><img id="LT_2" src="http://www.oldkids.cn/upload/12000/u11139/2011/04/30/blog_201104302018299.gif" width="14" height="16" style="display:none" /></td> <td id="numRange" nowrap="nowrap" style="font-weight: bolder; font-size: 14px; color: #a0a0a0;text-align:center; font-family: 宋体;cursor:hand;"title="单张"> </td> <td width="14px"><img id="GT_1" src="http://image76.360doc.com/DownloadImg/2014/07/3108/43877079_3.gif" width="14" height="16" onclick="diretGT();" style="cursor:hand;" title="右循环"><img id="GT_2" src="http://www.oldkids.cn/upload/12000/u11139/2011/04/30/blog_201104302015380.gif" width="14" height="16" style="display:none" /></td> </tr></tbody></table> </div> </div><script type="text/javascript" language="JavaScript"><!--这个script是传递给主程序的一些参数和幻灯片照片的地址--> speed = 6000; //一个周期的时间6秒，包括切换和稳定时间。切换时间在img里设置，Duration=2 现在是2秒，就是说停留稳定时间是4秒; transType = 23; //切换方式，0~23，共24种可选，23是随随机方式; slideimages = new Array() var dd = 0 slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u6727/2011/05/01/tblog_201105010742065.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u6727/2011/05/01/tblog_201105010742357.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u6727/2011/05/01/tblog_201105010743074.jpg" slideimages[dd++] = "http://image76.360doc.com/DownloadImg/2014/07/3108/43877079_1.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u6727/2011/05/01/tblog_201105010744196.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u6727/2011/05/01/tblog_201105010744528.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u6727/2011/05/01/tblog_201105010745231.jpg" slideimages[dd++] = "http://www.oldkids.cn/upload/9000/u6727/2011/05/01/tblog_201105010745453.jpg" //现在是8张图，可以自由增减，显示顺序就是按现在的排列顺序，可以随意更改; </script><!--下面的JS程序就是执行切换的主程序Slide_0502--> <script type="text/javascript" language="JavaScript" src="http://xizhi./other/Slide_0502.js"></script> </td></tr></tbody></table> 上面一大篇代码，看似复杂，其实需要替换的就是下面几个地方： 1。代码里的红字是幻灯片的地址，共八张照片。需要替换的有九处（8+1），除了很明显的连成一片的八个地址外，在前面的一个img标签里也有一张照片地址（也是红字）。这里可以放幻灯片的封面，如果没有封面可以用第一张照片代替。它只在刚打开博客时显示一次， 停留时间2秒，以后不再加入循环。习之戏称它为“蓝头”（60~70年代上海菜场里排队占位用的菜篮子，里面放块石头），意思是这张照片在这里只占个位置，等幻灯开始循环后它就退出。 照片的地址放在 slideimages[dd++] = 后面的双引号内，一张照片一行。照片的数量随需要增减。代码里的排列顺序就是播放顺序。 2。有蓝字表示的几个数字是照片的宽和高。需要根据实际情况修改。 上面两条的内容是必须替换成自己的。 上面代码框里的代码中插入了较多的注释，下面提供干净的代码文件，是一个txt文件，点击它能在浏览器里打开文件，就能得到完整的无注释的代码。 源代码： http://xizhi./other/2011/花儿朵朵幻灯源代码.txt
对于源代码有兴趣，或者要对播放器作一些变动，那么请继续阅读下面的内容。 在传递给主程序一些参数的JS脚本代码里，除了必需要替换的幻灯照片图集外，尚有两个参数可以调整： 1。speed = 6000 ; 这是播放速度，合理讲应该称为“周期时间”，即播放一张幻灯片的周期6秒，其中切换时间2秒，停留4秒。要快，改成4000或5000，（单位ms）。 2。transType = 23; 这23是第23号切换方式。这套幻灯片采用RevealTrans动态滤镜，共有24个切换方式。如果采用小于23的值，幻灯片将以同一个切换方式进行循环。例如： 设置 transType = 7 ; 7#滤镜是“向左擦除”，那么每张幻灯片均采用“向左擦除”。效果请看习之的音画“秃鹰飞去”。只有等于23时，才以”随机“方式进行切换，随机的母本就是0~22号切换方式。 下面列出0~23的效果的简单说明。（代码里是不能用#号的，这里只是为了看得清楚点） 0# ：矩形收缩；1# ：矩形扩张；2# ：圆形收缩；3# ：圆形扩张；
4# ：向上擦除；5# ：向下擦除；6# ：向右擦除；7# ：向左擦除； 8# ：纵向百叶窗效果；9# ：横向百叶窗效果； 10# ：纵向国际象棋棋盘格效果；11# ：横向国际象棋棋盘格效果；12# ：随机杂点干扰； 13# ：左右关门；14# ：左右开门；15# ：上下关门；16# ：上下开门； 17# ：从右上角到左下角锯齿边覆盖效果；18# ：从右下角到左上角锯齿边覆盖效果； 19# ：从左上角到右下角锯齿边覆盖效果；20# ：从左下角到右上角锯齿边覆盖效果； 21# ：随机横线条转换效果；22# ：随机竖线条转换效果； 23# ：随机使用上面可能的值实施转换。
因为在编辑状态时，不显示片号的数字，因此播放条的位置定位比较麻烦。在代码里它是在一个div的绝对定位内，上面代码框里是用绿色表示的： position:absolute;top:460px;left:560px; 坐标原点是照片的左上角，它控制的也是播放条左上角的位置。现在460、560适合现在照片大小和幻灯片数量。由于幻灯片数量不同，显示的数字会有多少，这个播放条的长度就不一样。因此，这两个数字要根据实际情况调整。可以参考的是播放控制条的长度等于左右两个按钮的宽度加数字段长度。现在按钮宽度14px；数字段长度的计算公式：设总片数为 total 9张及9张以下：total×16+4 10张及10张以上：total×16 + (total-9)×10 + 8 算起来显得麻烦，按实际效果调整比较方便。 因为播放条的长度是与数字的字体和字号相关的，因此数字的大小、字体不能改变，数字的遮罩颜色（红色）也不能改变，但是数字的本底色（现在是浅灰色color: #a0a0a0;）是可以改变的。如果该播放条所处于的背景是白色，这个颜色改成深色会更好。
歌曲：快乐的节日?演唱：中央人民广播电台少儿合唱团 |
|
|
