{"generator":"Code Snippets v3.7.0","date_created":"2026-04-08 06:17","snippets":[{"id":4,"name":"\u7b26\u5408\u7121\u969c\u7919\u7db2\u7ad9\u8a2d\u8a08\u7684Slider","code":"add_shortcode('accessible_slider', function($atts) {\n    \/\/ \u63a5\u6536\u77ed\u78bc\u53c3\u6578\uff1a\u9ad8\u5ea6\n    $atts = shortcode_atts(array(\n        'height' => '250px', \/\/ \u9810\u8a2d\u9ad8\u5ea6\n    ), $atts);\n \n    ob_start();\n    ?>\n    <style>\n        .slider-container {\n            position: relative;\n            width: 100%; \/* \u97ff\u61c9\u5f0f\u5bec\u5ea6 *\/\n            height: <?php echo esc_attr($atts['height']); ?>; \/* \u53ef\u8a2d\u5b9a\u9ad8\u5ea6 *\/\n            overflow: hidden;\n        }\n        .slider-container img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: none;\n        }\n        .slider-container img.active {\n            display: block;\n        }\n        .slider-controls {\n            position: absolute;\n            bottom: 10px;\n            left: 50%;\n            transform: translateX(-50%);\n            display: flex;\n            gap: 5px;\n        }\n        .slider-controls button {\n            background: #fff;\n            border: 1px solid #333;\n            border-radius: 50%;\n\t\t\tpadding: 5px 10px;\n            width: 20px;\n            height: 20px;\n            cursor: pointer;\n        }\n        .slider-controls button[aria-current=\"true\"] {\n            background: #333;\n            color: #fff;\n        }\n        \/* Focus \u6a23\u5f0f\uff1a\u660e\u986f\u984f\u8272\u5dee\u7570 *\/\n        .slider-controls button:focus {\n            outline: 3px solid #ff6600;\n            background: #ffcc00;\n            color: #000;\n        }\n        .slider-playback {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            display: flex;\n            gap: 10px;\n        }\n        .slider-playback button {\n            background: #333;\n            color: #fff;\n            border: none;\n            padding: 5px 10px;\n            cursor: pointer;\n            border-radius: 4px;\n        }\n        .slider-playback button:focus {\n            outline: 3px solid #ff6600;\n            background: #ffcc00;\n            color: #000;\n        }\n    <\/style>\n \n    <div class=\"slider-container\" role=\"region\" aria-label=\"\u5716\u7247\u8f2a\u64ad\">\n        <div class=\"slider-playback\">\n            <button id=\"pauseBtn\" aria-label=\"\u66ab\u505c\u8f2a\u64ad\">\u66ab\u505c<\/button>\n            <button id=\"playBtn\" aria-label=\"\u7e7c\u7e8c\u64ad\u653e\u8f2a\u64ad\">\u64ad\u653e<\/button>\n        <\/div>\n         \n        <img src=\"https:\/\/secretariat.npust.edu.tw\/wp-content\/uploads\/2022\/08\/\u79d8\u66f8\u5ba4banner01.jpg\" alt=\"\u570b\u7acb\u5c4f\u6771\u79d1\u6280\u5927\u5b78\u79d8\u66f8\u5ba4Banner\u4e4b\u4e00\" class=\"active\" \/>\n        <img src=\"https:\/\/secretariat.npust.edu.tw\/wp-content\/uploads\/2022\/08\/\u79d8\u66f8\u5ba4-02.jpg\" alt=\"\u570b\u7acb\u5c4f\u6771\u79d1\u6280\u5927\u5b78\u79d8\u66f8\u5ba4Banner\u4e4b\u4e8c\" \/>\n \n        <div class=\"slider-controls\" role=\"tablist\" aria-label=\"\u8f2a\u64ad\u63a7\u5236\">\n            <button role=\"tab\" aria-selected=\"true\" aria-current=\"true\" aria-label=\"\u986f\u793a\u7b2c\u4e00\u5f35\u5716\u7247\"><\/button>\n            <button role=\"tab\" aria-selected=\"false\" aria-label=\"\u986f\u793a\u7b2c\u4e8c\u5f35\u5716\u7247\"><\/button>\n        <\/div>\n \n    <\/div>\n \n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            const images = document.querySelectorAll(\".slider-container img\");\n            const buttons = document.querySelectorAll(\".slider-controls button\");\n            const pauseBtn = document.getElementById(\"pauseBtn\");\n            const playBtn = document.getElementById(\"playBtn\");\n            let index = 0;\n            let intervalId;\n \n            function showSlide(i) {\n                images.forEach((img, idx) => {\n                    img.classList.toggle(\"active\", idx === i);\n                });\n                buttons.forEach((btn, idx) => {\n                    btn.setAttribute(\"aria-selected\", idx === i ? \"true\" : \"false\");\n                    btn.setAttribute(\"aria-current\", idx === i ? \"true\" : \"false\");\n                });\n                index = i;\n            }\n \n            function startSlider() {\n                intervalId = setInterval(() => {\n                    let next = (index + 1) % images.length;\n                    showSlide(next);\n                }, 5000);\n                playBtn.setAttribute(\"aria-pressed\", \"true\");\n                pauseBtn.setAttribute(\"aria-pressed\", \"false\");\n            }\n \n            function stopSlider() {\n                clearInterval(intervalId);\n                playBtn.setAttribute(\"aria-pressed\", \"false\");\n                pauseBtn.setAttribute(\"aria-pressed\", \"true\");\n            }\n \n            \/\/ \u521d\u59cb\u5316\u81ea\u52d5\u8f2a\u64ad\n            startSlider();\n \n            \/\/ \u6309\u9215\u63a7\u5236\u5716\u7247\u5207\u63db\n            buttons.forEach((btn, idx) => {\n                btn.addEventListener(\"click\", () => {\n                    showSlide(idx);\n                });\n                btn.addEventListener(\"keydown\", (e) => {\n                    if (e.key === \"Enter\" || e.key === \" \") {\n                        showSlide(idx);\n                    }\n                });\n            });\n \n            \/\/ \u66ab\u505c\/\u64ad\u653e\u63a7\u5236\n            pauseBtn.addEventListener(\"click\", stopSlider);\n            playBtn.addEventListener(\"click\", startSlider);\n \n            \/\/ \u9375\u76e4\u5de6\u53f3\u65b9\u5411\u9375\u63a7\u5236\n            document.addEventListener(\"keydown\", (e) => {\n                if (document.activeElement.closest(\".slider-container\")) {\n                    if (e.key === \"ArrowLeft\") {\n                        let prev = (index - 1 + images.length) % images.length;\n                        showSlide(prev);\n                    } else if (e.key === \"ArrowRight\") {\n                        let next = (index + 1) % images.length;\n                        showSlide(next);\n                    }\n                }\n            });\n        });\n    <\/script>\n    <?php\n    return ob_get_clean();\n});","active":true,"modified":"2026-04-07 01:55:15","revision":"1"}]}