jQuery:丰富效果的Flash图片播放（JS重写版）

分类:jQuery, 插件开发, 案例分享 发表时间:2010年02月26日 字体大小:12号14号

大家看到这个图片播放效果的演示后一定觉得很熟悉吧，因为该效果使用的地方是在太多了。但凡比较大型的网站上都有图片播放的效果，有的是单一的图片切换、有的是图片渐入渐出、还有的就是左滑右滑。而我演示的这个版本则是播放效果比较丰富的，所以也是使用比较广泛的。

在以前的公司一个人做网站时我就曾将它作为公司网站首页的图片播放效果，那个时候我的Js不好，纯粹是拿了代码后套进内容，然后放到网上去就万事OK了。现在不一样了，JS编程熟悉了，jQuery库更是熟悉，便觉得原始的代码怎么看都不爽，昨天终于将该效果的JS代码重写了一下，贴出来与大家分享！

先来看看重写后的播放效果吧！

download demo

一、下载后的初始Html代码和JS代码：

Html代码(在需要显示图片播放的代码处添加)：

1

<script type="text/javascript" src="flashImgPlay.js"></script>

flashImgPlay.js中的Javascript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var pic_width=480; 
var pic_height=166; 
var button_pos=3; 
var stop_time=3000; 
var show_text=0; 
var txtcolor="000000"; 
var bgcolor="DDDDDD"; 
var imag=new Array();
var link=new Array();
var text=new Array();
imag[1]="images/pics/news09-col-manual.jpg";
link[1]="news/coll-manual.php";
imag[2]="images/pics/news02.jpg";
link[2]="news/mid_school.php";
 
var swf_height=(show_text==1)?pic_height+20:pic_height;
var pics="", links="", texts="";
for(var i=1; i<imag .length; i++){
	pics=pics+("|"+imag[i]);
	links=links+("|"+link[i]);
	texts=texts+("|"+text[i]);
}
pics=pics.substring(1);
links=links.substring(1);
texts=texts.substring(1);
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="flash/focus.swf">');
document.write('</param><param name="quality" value="high"></param><param name="wmode" value="opaque">');
document.write('</param><param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">');
document.write('<embed src="flash/focus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('');
</param></imag>

二、重写后的Html代码、Css代码以及JS代码：

Html代码(在需要显示图片播放的代码处添加)：

1
2
3
4
5
6
7
8

<div class="flash">
    <ul>
        <li class="first"><a href="#" target="_blank"><img src="1.jpg" alt="banner1" /></a></li>
        <li><a href="#" target="_blank"><img src="2.jpg" alt="banner2" /></a></li>
        <li><a href="#" target="_blank"><img src="3.jpg" alt="banner3" /></a></li>
        <li><a href="#" target="_blank"><img src="4.jpg" alt="banner4" /></a></li>
    </ul>
</div>

需要用到的Css代码：

1
2
3
4
5
6

* { margin:0; padding:0;}
body { text-align:center;}
img { border:none;}
.flash { width:500px; text-align:left; margin:50px auto;}
.flash li { list-style:none; display:none;}
.flash li.first { display:block;}

flashImgPlay.js中的Javascript代码（插件方式）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

;(function($) {
	$.fn.extend({
		flashImgPlay : function(options) {
			return this.each(function() {
				var defaults = $.extend({
					width : $('img:first', this).width(),
					height : $('img:first', this).height(),
					btn_pos : 3,
					stop_time : 3000,
					show_text : 0,
					txtcolor : '000000',
					bgcolor : 'dddddd',
					flash_src : 'focus.swf'
				}, options);
 
				var images = {
					imgs : [],
					links : [],
					texts : []
				};
 
				$('a', this).each(function() {
					images.imgs.push($('img', this).attr('src'));
					images.links.push($(this).attr('href'));
					images.texts.push($('img', this).attr('alt'));
				});
 
				var swf_height = (defaults.show_text == 1) ? (defaults.height + 20) : defaults.height,
					pics = '', links = '', texts = '';
 
				for(var i = 0, length = images.imgs.length; i < length; i++) {
					pics += '|' + images.imgs[i];
					links += '|' + images.links[i];
					texts += '|' + images.texts[i];
				};
				pics = pics.substring(1),
				links = links.substring(1),
				texts = texts.substring(1);
 
				$(this).html(
					'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ defaults.width +'" height="'+ swf_height +'">' +
						'<param name="movie" value="'+defaults.flash_src+'">' +
						'</param><param name="quality" value="high"></param><param name="wmode" value="opaque">' +
						'</param><param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+defaults.width+'&pic_height='+defaults.height+'&show_text='+defaults.show_text+'&txtcolor='+defaults.txtcolor+'&bgcolor='+defaults.bgcolor+'&button_pos='+defaults.btn_pos+'&stop_time='+defaults.stop_time+'">' +
						'<embed src="'+defaults.flash_src+'" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+defaults.width+'&pic_height='+defaults.height+'&show_text='+defaults.show_text+'&txtcolor='+defaults.txtcolor+'&bgcolor='+defaults.bgcolor+'&button_pos='+defaults.btn_pos+'&stop_time='+defaults.stop_time+'" quality="high" width="'+ defaults.width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />' +
					''
				);
			});
		}
	});
})(jQuery);
</param>

调用方法：

1
2
3
4

jQuery(function($) {
	$('.flash').flashImgPlay();
	//$('.flash').flashImgPlay({stop_time:200, show_text:1}); 自行设置播放间隔、是否显示图片标题  
});

三、重写前后的比较说明：

原始代码使用需要在Html代码内嵌入js文件，若一个页面中需要多个图片播放的话（大型网站上常有），就需要创建多个JS文件，并在一个页面中多次引入JS文件嵌套到Html代码内。这严重违背了三层分离的原则。重写后的插件版，只需在文档底部引入一次JS文件，通过方法调用就可以实现一个页面中多个图片播放效果。新代码是自识别图片的大小，从而实现自适应效果。

不过貌似该效果使用到的foucs.swf的as代码中没有支持.gif格式的图片（这也是我多花了半个小时来调试），又因我暂时还不太会AS编程，所以没对focus.swf进行修改。所以大家使用时图片需采用.jpg格式。另外貌似若设置show_text:1的话，就是显示图片的标题，默认的第一个是现实原作者的版权链接。这些只是对该foucs.swf的bug的说明！

你也许会喜欢阅读这些：

不错不错，已经有 个评论！
  1. 安徽汽车维修网
    2010年02月27日于17:14 回复

    博主的界面好好看！

  2. 海龟来了
    2010年02月28日于15:21 回复

    棒极了！谢谢分享哈！

  3. 宁波SEO
    2010年03月2日于16:29 回复

    写得很好，很清晰有条理。

  4. keelii
    2010年03月2日于17:57 回复

    请教个问题：
    var imgNum = 4;
    var nodeImg = document.getElementsByTagName(“img”);

    for(j=0; j<imgNum; j++){

    var minWidth = (600 – imgWidth)/(imgNum-1);
    nodeImg[j].onmouseover = function(){
    this.style.marginLeft = j*minWidth + "px";
    }
    }
    这段代码在鼠标移动到img标签时为什么j的值总是4而不是1,2,3,4？

    • Hiro
      2010年03月2日于21:29

      等你鼠标移上去的时候，for循环已经执行完了，应该是你鼠标移动到图片上后才会出发j的递增！
      var imgNum = 4;
      var nodeImg = document.getElementsByTagName(“img”);

      var j=0;

      var minWidth = (600 – imgWidth)/(imgNum-1);
      nodeImg[j].onmouseover = function(){
      if(j>=imgNum) return false;
      this.style.marginLeft = j*minWidth + “px”;
      j++;
      }

  5. keelii
    2010年03月2日于22:58 回复

    我想做的是这样一个效果：有四张图片，当鼠标移动到每一个图片上去的时候都有一个函数来处理效果。你写的这代码是第次移动到第一张图片上面的效果，其它没反映！
    能不能将四张图片都加上onmouseover的事件并编写函数？

    • keelii
      2010年03月2日于22:59

      这个字打错了哈！

  6. 棺材中的尘埃
    2010年03月3日于02:46 回复

    来学习代码了，博主的上方图片很有趣：）跟随鼠标移动：）

  7. keelii
    2010年03月5日于09:11 回复

    博客换域名了，特来低调通知一下keelii.cn变成了keelii.com。欢迎断续围观哈，
    果断关注我请点这里：
    http://feed.feedsky.com/kily

    • Hiro
      2010年03月5日于12:01

      已经更新！！会继续关注！

  8. SEO-prooxy
    2010年03月7日于02:39 回复

    jQuery确实很厉害！ 该学习下！

  9. 阅城
    2010年03月13日于01:25 回复

    每每看到这种文章，我都觉得我懒了好多，看来我得充充电了。。

  10. 哟ＹＯ
    2010年06月19日于20:03 回复

    你好，能帮我写一段现成Flash图片播放的代码吗，我什么都不懂，也不太会套用

  11. daemon
    2010年09月26日于15:35 回复

    请教一个问题，js你怎么学的那么好了。教我一个学习方法，谢谢。~~

  12. reyee
    2010年11月23日于23:57 回复

    问题1：flashImgPlay.js中的最后一行是否有必要？
    问题2：flashImgPlay.js中内容直接写在文件中，该文件能正常播放，如果用调用flashImgPlay.js的方式，就显示错误，并提示：$(‘.flash’).flashImgPlay();这行中有 对象不支持此属性或方法 问题，这是为什么呢？

  13. reyee
    2010年11月23日于23:59 回复

    我的问题已经解决了。。。

我要评论

  • * *