Jquery 切换 flash
说明：
此事例实现的效果是：Jquery 切换 flash ，好比切换图片效果一样！ 外加 获取span传值。
分析：
flahs跟一般标签不同，本来是想着获取它的 src 然后给src 赋值，但是一直获取不到（新手，能力有限）。
后来想到给div追加项的方式，实现了切换效果，在这里分享一下。
备注：
1、你可以新建一个空网站，然后新建一个flash文件夹，放置4张图片，用来显示上一页，下一页切换
效果。
2、放置需要的flash。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery 切换 flash</title>
<!-- 引入Jquery -->
<script type="text/javascript" src="Script/jquery-1.3.2.min.js" language="javascript"></script>
<!-- 为a标签设定样式 -->
<style type="text/css">
a{ text-decoration:underline; color:#a8a8ad;}
</style>
</head>
<body>
<form id="form1" runat="server">
<!-- 这里给整个div设定了背景图片 -->
<div style="width:1024px;height:768px;margin:0 auto; background-image:url('flash/bg.png'); background-repeat:no-repeat;">
<!-- 1、标题 -->
<div style="width:1024px;height:60px;">
<br />
<h2> Jquery 切换 flash....</h2>
</div>
<!-- 2、中间 显示 flash div -->
<div style="width:1024px;height:400px; text-align:center">
<div style="float:left; width:15px;height:400px;" ></div>
<!-- 2.1上一个 -->
<div style="float:left;height:400px; ">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br />
<img id="btnPre" src="flash/pre2.png" alt="pre"
style="vertical-align: middle" align="middle" /></div>
<!-- 2.2 、flash div -->
<div id="divfs" style="margin:60px auto; width:949px; height:363px; border:1; float:left ;">
<embed width="944px" height="360px"
type="application/x-shockwave-flash"
src="flash/FLASH1.swf"
pluginspage="http://www.adobe.com/go/getflashplayer"
/>
</div>
<!--- 2.3 下一个 -->
<div style="float:left;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br />
<img id="btnChange" src="flash/next2.png" alt="next"/>
</div>
</div>
<!-- 3、底部显示切换 span 传值 -->
<div style="width:1024px;height:200px;" >
<!-- 3.1 span 区域 -->
<div style="width:900px; float:left;margin-left:30px;margin-top:60px;">
<strong>选择：</strong> <a href="#"><span>1</span></a> <a href="#"><span>2</span></a> <a href="#"><span>3</span></a>
<a href="#"><span>4</span></a> <a href="#"><span>5</span></a> <a href="#"><span>6</span></a>
<a href="#"><span>7</span></a> <a href="#"><span>8</span></a> <a href="#"><span>9</span></a>
<a href="#"><span>11</span></a> <a href="#"><span>12</span></a> <a href="#"><span>13</span></a>
<a href="#"><span>14</span></a> <a href="#"><span>15</span></a> <a href="#"><span>16</span></a>
<a href="#"><span>17</span></a> <a href="#"><span>18</span></a> <a href="#"><span>19</span></a>
<a href="#"><span>21</span></a> <a href="#"><span>22</span></a> <a href="#"><span>23</span></a>
<a href="#"><span>24</span></a> <a href="#"><span>25</span></a> <a href="#"><span></span></a>
<a href="#"><span></span></a> <a href="#"><span></span></a>
</div>
<!-- 3.2 底部声明 -->
<div style="width:1024px;margin-top:100px; float:left; text-align:center">
<span style="font-font-family:宋体;font-size:16px;">1999-2011 Show flash © <span style="color:Red;font-size:20px;">彩</span><del style="color:Green;">色</del><span style="font-size:16px;color:black;">C</span>o<span style="font-size:14px;Color:blue;">d</span><span style="color:Black;font-size:14px;">e</span></span>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
/**
*这里可要 ，可不要
**/
$(document).ready(function () {
$('#divfs').flash(
{ src: 'flash/FLASH1.swf',
width: 947,
height: 400
},
{ version: 8 }
);
});
//设定flash初始值
var i = 0;
//给下一页绑定onclick事件，为divfs追加html = flash 脚本
$("#btnChange").bind("click", function (event) {
i++;
$("#divfs").html("<embed width='944px' height='360px' type='application/x-shockwave-flash' src='flash/FLASH" + i + ".swf' pluginspage='http://www.adobe.com/go/getflashplayer' />");
if (i >= 25) {
i = 0;
}
});
//给上一页绑定onclick事件，如上所示，
$("#btnPre").bind("click", function (event) {
if (i <= 0) {
i = 2;
}
i--;
$("#divfs").html("<embed width='944px' height='360px' type='application/x-shockwave-flash' src='flash/FLASH" + i + ".swf' pluginspage='http://www.adobe.com/go/getflashplayer' />");
if (i >= 1) {
i = 2;
}
});
//给上下页图片添加mouseover ，mouseout事件
$("#btnChange").mouseover(function (event) {
$(this).attr("src", "flash/next.png");
}).mouseout(function (event) {
$(this).attr("src", "flash/next2.png");
});
$("#btnPre").mouseover(function (event) {
$(this).attr("src", "flash/pre.png");
}).mouseout(function (event) {
$(this).attr("src", "flash/pre2.png");
});
//遍历所有的span标签，点击span标签时，将span内的文本作为flash的下标，追加divfs= flash 脚本
$("span").each(function (event) {
var num2 = $(this).html();
$(this).click(function (event) {
$("#divfs").html("<embed width='944px' height='360px' type='application/x-shockwave-flash' src='flash/FLASH" + num2
+ ".swf' pluginspage='http://www.adobe.com/go/getflashplayer' />");
});
});
</script>
</form>
</body>
</html>
效果预览：
1、
2、
3、
4、
目前先提供一半的Demo下载地址：[JqueryDemo]
浙公网安备 33010602011771号