有说明的图片轮播 学习马老师教程制作

霜染枫丹

旋覆花，中药名。为菊科旋覆花属植物旋覆花。具有降气，消痰，行水，止呕的功效。拍摄于明城墙遗址公园。

🔊朗读说明文字 🛑停止朗读

鼠标指针移动到轮播方框，滚动动画暂停

霜染枫丹

看个意思吧，就是实验，不算作品。在宽版的模板里正常，就搬过来了

梦江南

太棒了，在黑黑老师的精华上还加了边框底色和朗读，欣赏学习！

霜染枫丹

梦江南 发表于 2026-8-6 08:44
太棒了，在黑黑老师的精华上还加了边框底色和朗读，欣赏学习！

梦江南上午好~~感谢您的支持鼓励！我就想这样我可以用在很多地方。很喜欢马黑黑老师的这个版本。天还很热，多保重！

夕阳黄昏

模仿一个鼠标移进文字描述开始朗读，移出停止

旋覆花，中药名。为菊科旋覆花属植物旋覆花。具有降气，消痰，行水，止呕的功效。拍摄于明城墙遗址公园。

霜染枫丹

夕阳黄昏 发表于 2026-8-6 10:28
模仿一个鼠标移进文字描述开始朗读，移出停止

@import url(https://fonts.googleapis.com/css2 ...

哈哈~~太棒了！！！感谢夕阳黄昏~~~

就执行这个结果，这是我最想要的，谢谢您！

霜染枫丹

夕阳黄昏 发表于 2026-8-6 10:28
模仿一个鼠标移进文字描述开始朗读，移出停止

@import url(https://fonts.googleapis.com/css2 ...

哈哈~~太棒了！！！感谢夕阳黄昏~~~

就执行这个结果，这是我最想要的，谢谢您！

红影

这个制作很漂亮，但定位有点问题，枫丹可以照着夕阳黄昏的方式修改一下定位呢。
欣赏枫丹好帖

霜染枫丹

红影 发表于 2026-8-6 12:22
这个制作很漂亮，但定位有点问题，枫丹可以照着夕阳黄昏的方式修改一下定位呢。
欣赏枫丹好帖

咱们这里的模板是窄版，不能很好的显示。有了黄昏夕阳的代码，我就不折腾了我对代码的能力不达标，折腾挺费时间的，我的帖子响应度不高，没影响力我自己能用就可以了，若在这里发帖，就用夕阳黄昏的代码

魏淑芬

欣赏。学习。点赞！
有空了我也要弄一个，弄不好的地方，到时还要请教枫丹哦。

魏淑芬

夕阳黄昏 发表于 2026-8-6 10:28
本帖最后由 霜染枫丹 于 2026-8-6 10:34 编辑 模仿一个鼠标移进文字描述开始朗读，移出停止

@ ...

好棒耶！
老师能给个现成的代码么？俺比较懒

霜染枫丹

魏淑芬 发表于 2026-8-6 13:03
欣赏。学习。点赞！
有空了我也要弄一个，弄不好的地方，到时还要请教枫丹哦。

我也会制作一个，然后固定下来。可以逐渐地成为一个系列，方别用于不同的场合。由新想法我们一起交流。我喜欢做这些事情。

霜染枫丹

魏淑芬 发表于 2026-8-6 13:03
欣赏。学习。点赞！
有空了我也要弄一个，弄不好的地方，到时还要请教枫丹哦。

我把代码复制给你，北京就是我临时从以前存档找的，可以换成你自己喜欢的。






模仿一个鼠标移进文字描述开始朗读，移出停止

下面是代码：

<style>
@import url(https://fonts.googleapis.com/css ... ng&display=swap);
/* 中间层：你的原有滚动轮播窗口 */
#oBlk        {
        width: 1200px;
        height: 600px;
                        background: url("https://ff.xiaoqiaodali.top:5401/i/2026/08/05/6a734f9bdd76b.png") no-repeat center/cover;
                        padding:32px 32px;
                place-items:center;position:relative;
                box-shadow:3px 3px 8px darkgray;
                overflow:hidden;border-radius:24px;
                display: grid;place-items:center;
                grid-template-rows:90% 10%;
                grid-template-columns:100%;
                margin:30px auto 30px calc(50% - 681px);
                position:relative;

        #pa {
                        width: 100%;
                        height: 100%;
                        border: 4px dotted gray;
                        overflow: hidden;
                        position: relative;
                       
                       
                        #son {
                                        position: absolute;
                                        height: 100%;
                                        white-space: nowrap;
                                        animation: scroll 55s linear infinite;
                                       
                                        &:hover {
                                                        animation-play-state: paused;
                                        }
                                        img {
                                                        height: 100%;
                                                        margin: 2px;
                                        }
                        }
        }
        /* 顶层文字说明层，z-index最高浮在最上面 */
        #text-layer {
                        z-index: 99;
                        font-size: 1.35em;
                        color: brown;
                        background-color: transparent;
                        margin-top: 32px;
                        border-radius: 6px;
                        max-width: 600px;
                        font-family: 'Long Cang';
                        padding:8px;
                        cursor:pointer;
        }

}
@keyframes scroll {
    to { transform: translateX(-50%); }
}


</style>
<div id='oBlk'>
    <div id="pa">
        <div id="son">
            <img src="https://pic.imgdd.cc/i/0341vDnubEXY1dcR1QxurR.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0341vDliE6hNtKge3aIIBy.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0341vDus2yNwbYXSRqrI6C.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0341vDnOWxMH3SoaMWSrQ5.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0341vDupu5URpsFRt9EAxW.jpg" loading="lazy" alt="" />

            <img src="https://pic.imgdd.cc/i/0341vDuvkrsCkJ17uWeDNg.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0341vDvmsmgl8ysLCEjsaL.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0341vDw6ZROm2uoiqFfklq.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0341vDupu5URpsFRt9EAxW.jpg" loading="lazy" alt="" />
            <!-- 修正了原代码中多余的 'g'，并更正了 loading 属性 -->
            <img src="https://pic.imgdd.cc/i/0341vDus2yNwbYXSRqrI6C.jpg" loading="lazy" alt="" />
        </div>
    </div>
                                <div id="text-layer">
                                                旋覆花，中药名。为菊科旋覆花属植物旋覆花。具有降气，消痰，行水，止呕的功效。拍摄于明城墙遗址公园。
                                </div>
</div>
<script>
//浏览器自带语音朗读，读取上面.text-layer里面的文字
const synthObj = window.speechSynthesis;
let descObj = document.querySelector("#text-layer");

function voicePlay() {
    synthObj.cancel();
                let descTxt = descObj.innerText.trim();
    if (!descTxt) return;
    let voiceObj = new SpeechSynthesisUtterance(descTxt);
    voiceObj.lang = "zh-CN";
    voiceObj.rate = 0.9; //语速，数字越小读得越慢
    synthObj.speak(voiceObj);
}
descObj.onmouseenter = () => {voicePlay();}
descObj.onmouseout = () => {synthObj.cancel();}
</script>

魏淑芬

霜染枫丹 发表于 2026-8-6 13:40
我把代码复制给你，北京就是我临时从以前存档找的，可以换成你自己喜欢的。

太感谢了！我不懂代码，只会照虎画猫
只要把我自己的图片地址和文字，替换进去就可以了吧？文字的朗读是自动的吗？

霜染枫丹

魏淑芬 发表于 2026-8-6 15:06
太感谢了！我不懂代码，只会照虎画猫
只要把我自己的图片地址和文字，替换进去就可以 ...

是的，只是按照地址填进去就可以了。这个模板当鼠标放在背景上，声音自动显示，放在照片上声音不响应。这些代码我是来到花潮看到马老师的帖子才跟着学的，您比我有基础，我一句英语不懂，那些元素什么长宽高等能调整的选项全都当作象形文字死记硬背，也不会读。好用就行。你先试试。您到马老师的帖子里找他的贴宝的帖子，那是一个编辑器，你把代码输入点击“预览“就可以演示，很好用，我一直在用。看预览都正确了再把代码复制留存。这样就可以发帖了。

夕阳黄昏

魏淑芬 发表于 2026-8-6 13:08
好棒耶！
老师能给个现成的代码么？俺比较懒

13#就是啊

雨季工作室

欣赏学习枫丹老师精彩制作！

魏淑芬

夕阳黄昏 发表于 2026-8-6 19:34
13#就是啊

嗯嗯，看到啦，多谢！

霜染枫丹

雨季工作室 发表于 2026-8-7 09:19
欣赏学习枫丹老师精彩制作！

谢雨季工作室的支持。立秋快乐！

红影

霜染枫丹 发表于 2026-8-6 12:37
咱们这里的模板是窄版，不能很好的显示。有了黄昏夕阳的代码，我就不折腾了我对代码的能力不达标，折腾挺 ...

嗯嗯，也行。其实，都是玩，只要快乐就是最好的