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

霜染枫丹 发表于 2026-8-6 00:21

霜染枫丹 发表于 2026-8-6 00:29

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

梦江南 发表于 2026-8-6 08:44

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

霜染枫丹 发表于 2026-8-6 10:26

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

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

夕阳黄昏 发表于 2026-8-6 10:28

本帖最后由夕阳黄昏于 2026-8-7 14:59 编辑 <br /><br />模仿一个{:5_106:}鼠标移进文字描述开始朗读，移出停止
<style>
@import url(https://fonts.googleapis.com/css2?family=Long+Cang&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: 50%;
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="" />
         
         <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 10:31

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

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

哈哈~~太棒了！！！感谢夕阳黄昏~~~{:4_199:}{:4_188:}{:4_199:}{:4_178:}{:4_191:}

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

霜染枫丹 发表于 2026-8-6 10:32

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

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

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

就执行这个结果，这是我最想要的，谢谢您！{:4_188:}{:4_204:}{:4_190:}{:4_178:}{:4_199:}

红影发表于 2026-8-6 12:22

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

霜染枫丹 发表于 2026-8-6 12:37

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

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

魏淑芬 发表于 2026-8-6 13:03

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

魏淑芬 发表于 2026-8-6 13:08

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

@ ...

好棒耶！{:4_199:}
老师能给个现成的代码么？俺比较懒{:4_173:}

霜染枫丹 发表于 2026-8-6 13:38

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

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

霜染枫丹 发表于 2026-8-6 13:40

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

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

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

下面是代码：

<style>
@import url(https://fonts.googleapis.com/css2?family=Long+Cang&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="" />
         
         <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 15:06

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

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

霜染枫丹 发表于 2026-8-6 15:40

本帖最后由霜染枫丹于 2026-8-6 15:41 编辑

魏淑芬发表于 2026-8-6 15:06
太感谢了！我不懂代码，只会照虎画猫
只要把我自己的图片地址和文字，替换进去就可以 ...
是的，只是按照地址填进去就可以了。这个模板当鼠标放在背景上，声音自动显示，放在照片上声音不响应。这些代码我是来到花潮看到马老师的帖子才跟着学的，您比我有基础，我一句英语不懂，那些元素什么长宽高等能调整的选项全都当作象形文字死记硬背，也不会读。{:4_173:}好用就行。你先试试。您到马老师的帖子里找他的贴宝的帖子，那是一个编辑器，你把代码输入点击“预览“就可以演示，很好用，我一直在用。看预览都正确了再把代码复制留存。这样就可以发帖了。{:4_204:}{:4_190:}

夕阳黄昏 发表于 2026-8-6 19:34

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

13#就是啊

雨季工作室 发表于 2026-8-7 09:19

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

魏淑芬 发表于 2026-8-7 12:32

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

嗯嗯，看到啦，多谢！{:4_204:}

霜染枫丹 发表于 2026-8-7 20:11

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

谢雨季工作室的支持。立秋快乐！{:4_204:}{:4_190:}

红影发表于 2026-8-7 21:50

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

嗯嗯，也行。其实，都是玩，只要快乐就是最好的{:4_187:}

页: [1] 2

花潮论坛's Archiver

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

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