完成flash实验

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物理演示 Flash 动画按顺序显示</title>
    <style>
        .flash-container {
            display: none; /* 默认隐藏所有动画 */
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>物理演示 Flash 动画按顺序显示</h1>
    <p>点击下面的按钮依次查看 Flash 动画。</p>

    <!-- 按钮控制 Flash 动画 -->
    <button onclick="showFlash(1)">显示第一个动画</button>
    <button onclick="showFlash(2)">显示第二个动画</button>
    <button onclick="showFlash(3)">显示第三个动画</button>
    <button onclick="showFlash(4)">显示第四个动画</button>
    <button onclick="showFlash(5)">显示第五个动画</button>
    <button onclick="showFlash(6)">显示第六个动画</button>

    <!-- Flash 动画容器 -->
    <div id="flash1" class="flash-container">
        <object data="阻尼振动(2) (33K).swf" width="600" height="400" type="application/x-shockwave-flash">
            <param name="movie" value="阻尼振动(2) (33K).swf">
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
            <p>您的浏览器不支持 Flash 动画。</p>
        </object>
    </div>

    <div id="flash2" class="flash-container">
        <object data="阻尼振动1 (28K).swf" width="600" height="400" type="application/x-shockwave-flash">
            <param name="movie" value="阻尼振动1 (28K).swf">
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
            <p>您的浏览器不支持 Flash 动画。</p>
        </object>
    </div>

    <div id="flash3" class="flash-container">
        <object data="阻尼振动实例 (6K).swf" width="600" height="400" type="application/x-shockwave-flash">
            <param name="movie" value="阻尼振动实例 (6K).swf">
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
            <p>您的浏览器不支持 Flash 动画。</p>
        </object>
    </div>

    <div id="flash4" class="flash-container">
        <object data="做功使内能改变 (41K).swf" width="600" height="400" type="application/x-shockwave-flash">
            <param name="movie" value="做功使内能改变 (41K).swf">
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
            <p>您的浏览器不支持 Flash 动画。</p>
        </object>
    </div>

    <div id="flash5" class="flash-container">
        <object data="做功与热传递 (50K).swf" width="600" height="400" type="application/x-shockwave-flash">
            <param name="movie" value="做功与热传递 (50K).swf">
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
            <p>您的浏览器不支持 Flash 动画。</p>
        </object>
    </div>

    <div id="flash6" class="flash-container">
        <object data="做加速运动的小车 (6K).swf" width="600" height="400" type="application/x-shockwave-flash">
            <param name="movie" value="做加速运动的小车 (6K).swf">
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
            <p>您的浏览器不支持 Flash 动画。</p>
        </object>
    </div>

    <script>
        var currentFlashIndex = 0;

        // 控制动画显示的函数
        function showFlash(index) {
            console.log("按钮点击,显示第 " + index + " 个动画");

            // 隐藏当前显示的 Flash 动画
            var currentFlash = document.getElementById('flash' + currentFlashIndex);
            if (currentFlash) {
                currentFlash.style.display = 'none';
            }

            // 显示点击的 Flash 动画
            var flashToShow = document.getElementById('flash' + index);
            if (flashToShow) {
                flashToShow.style.display = 'block';
            }

            // 更新当前显示的动画索引
            currentFlashIndex = index;
        }

    </script>
</body>
</html>

 

posted @ 2024-11-26 08:55  KuanDong24  阅读(3)  评论(0编辑  收藏  举报