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="1024px;height:768px;margin:0 auto; background-image:url('flash/bg.png'); background-repeat:no-repeat;">
         
         <!-- 1、标题 -->
         <div style="1024px;height:60px;">
            <br />
              <h2>  Jquery 切换 flash....</h2>
         </div>

         <!-- 2、中间 显示 flash div -->
         <div style="1024px;height:400px; text-align:center">
               <div style="float:left; 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; 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="1024px;height:200px;" >

                <!-- 3.1 span 区域 -->
                <div style="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="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',
                 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]

原文地址:https://www.cnblogs.com/307914070/p/1933634.html