知行合一，止于至善
千里之行，始于足下；合抱之木，生于毫末；九层之台，起于累土图片轮显的一种简单的实现方式
9月 13, 2014 |
Nix.Huang
最近在学习DIV+CSS 布局，根据aa25.cn上的《十天学会DIV+CSS(WEB标准)》教程学习，里面有一个图片轮显的示例，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<object width="269" height="210" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param value="http://www.javacoder.cn/wp-content/uploads/2014/09/indexpic.swf" name="movie"> <param value="high" name="quality"> <param value="false" name="menu"> <param value="opaque" name="wmode"> <param value="bcastr_file=bcastr_file=http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex1.jpg|http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex2.jpg|http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex3.jpg|http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex4.jpg&bcastr_link=#|#|#|#&bcastr_title=" name="FlashVars"> <embed width="269" height="210" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" quality="high" false"="" flashvars="bcastr_file=bcastr_file=http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex1.jpg|http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex2.jpg|http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex3.jpg|http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex4.jpg&bcastr_link=#|#|#|#&bcastr_title=&menu=" wmode="opaque" src="http://www.javacoder.cn/wp-content/uploads/2014/09/indexpic.swf"> </object> |
它的原理也很简单，通过参数将要显示地图片传给indexpic.swf ，其实是调用flash player播放这个swf来实现图片轮显的。
虽然达到了效果，但是我感觉它的代码很冗余，<object>里面嵌套<embed>，一番谷歌后发现它之所以这么写，是为了浏览器兼容，可能aa25.cn的这个教程写的比较久远，那时浏览器的兼容更不好，现在情况大好，IE也不再是一只独大，现在所有的浏览器都会考虑服从W3C标准，其实只用一个<object> 标签就可以完成这个效果，代码如下：
|
1 2 3 4 5 6 7 8 |
<object width="269" height="210" type="application/x-shockwave-flash" data="http://www.javacoder.cn/wp-content/uploads/2014/09/indexpic.swf"> <param value="high" name="quality"> <param value="false" name="menu"> <param value="opaque" name="wmode"> <param value="bcastr_file=http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex1.jpg|http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex2.jpg|http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex3.jpg|http://www.javacoder.cn/wp-content/uploads/2014/09/picIndex4.jpg&bcastr_link=#|#|#|#&bcastr_title=&menu=" name="flashvars"> </object> |
运行结果：
在Firefox， chrome, IE10下测试通过
实现步骤：
1）下载indexpic.swf
2) 将上面两段代码的任一段拷贝到图片轮显的位置，修改图片的路径
Posted in: Uncategorized | Tags: html object标签, 图片轮显
Comments are closed.