马德罗丹微缩城 - 图片轮播及解说

魏淑芬

梦油 发表于 2026-8-9 19:49
开阔眼界、增长见识。谢谢淑芬朋友。

谢谢梦油老师关注欣赏！

魏淑芬

霜染枫丹 发表于 2026-8-9 19:51
魏淑芬下午好！

特别理想的效果，真漂亮！照片拍的特别好，跟着照片的平移见识到了这异域风情，惬意！{: ...

好多年前去的了，再别的论坛发过帖，是一张一张照片发的，在这里试试新的方式，看看效果如何。
感觉还不错，要谢谢您分享的@马黑黑老师 、@夕阳黄昏老师 的代码。我这个好像还有点小问题。

魏淑芬

杨帆 发表于 2026-8-9 22:59
效果漂亮，大饱眼福，谢谢魏淑芬老师精彩分享

谢谢杨帆老师关注！

魏淑芬

雨季工作室 发表于 2026-8-10 09:08
欣赏淑芬老师精制作品！

谢谢老师关注欣赏！

夕阳黄昏

魏淑芬 发表于 2026-8-11 13:11
没搞明白缺啥了，为什么演示的可以，发帖就不行呢？

演示？在哪的演示

魏淑芬

夕阳黄昏 发表于 2026-8-11 13:44
演示？在哪的演示

在马黑黑老师的帖宝里，预览挺好的。
今天，枫丹的两个有语音的，我也听不到了。

夕阳黄昏

魏淑芬 发表于 2026-8-11 14:08
在马黑黑老师的帖宝里，预览挺好的。
今天，枫丹的两个有语音的，我也听不到了。

哦， 没用过。

不过我看过您的代码应该是没有与发声相关的代码。

魏淑芬

夕阳黄昏 发表于 2026-8-11 14:11
哦， 没用过。

不过我看过您的代码应该是没有与发声相关的代码。

我用的是枫丹回复我给的代码，应该就是您给她的吧。
我刚才用编辑看了一下我的帖子的原码，怎么和我发帖的代码不一样呢？论坛会自动整理代码么？

魏淑芬

夕阳黄昏 发表于 2026-8-11 14:11
哦， 没用过。

不过我看过您的代码应该是没有与发声相关的代码。

这一串代码是语音发声的吗

       #text-layer {
                        z-index: 99;
                        font-size: 1.35em;
                        color: brown;
                        background-color: transparent;
                        margin-top: 32px;
                        border-radius: 6px;
                        max-width: 800px;
                        font-family: 'Long Cang';
                        padding:8px;
                        cursor:pointer;
        }

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

我原先发的贴子里有啊

夕阳黄昏

魏淑芬 发表于 2026-8-11 14:23
这一串代码是语音发声的吗

       #text-layer {

这不是的。我把1#的代码复制了一份，加上了缺失的部分（79 ~ 96）

1. <style>
   
2.   @import url(https://fonts.googleapis.com/css?family=Long+Cang&display=swap);
   
3. 
   
4.   #oBlk {
   
5.     width: 1100px;
   
6.     height: 786px;
   
7.     background: url no-repeat center/cover;
   
8.     padding: 32px 32px;
   
9.     place-items: center;
   
10.     position: relative;
    
11.     box-shadow: 3px 3px 8px darkgray;
    
12.     overflow: hidden;
    
13.     border-radius: 24px;
    
14.     display: grid;
    
15.     place-items: center;
    
16.     grid-template-rows: 90% 10%;
    
17.     grid-template-columns: 100%;
    
18.     margin: 30px auto 30px calc(50% - 681px);
    
19.     position: relative;
    
20. 
    
21.     #pa {
    
22.       width: 100%;
    
23.       height: 100%;
    
24.       border: 4px dotted gray;
    
25.       overflow: hidden;
    
26.       position: relative;
    
27. 
    
28.       #son {
    
29.         position: absolute;
    
30.         height: 100%;
    
31.         white-space: nowrap;
    
32.         animation: scroll 55s linear infinite;
    
33. 
    
34.         &:hover {
    
35.           animation-play-state: paused;
    
36.         }
    
37. 
    
38.         img {
    
39.           height: 100%;
    
40.           margin: 2px;
    
41.         }
    
42.       }
    
43.     }
    
44. 
    
45.     #text-layer {
    
46.       z-index: 99;
    
47.       font-size: 1.35em;
    
48.       color: brown;
    
49.       background-color: transparent;
    
50.       margin-top: 32px;
    
51.       border-radius: 6px;
    
52.       max-width: 800px;
    
53.       font-family: 'Long Cang';
    
54.       padding: 8px;
    
55.       cursor: pointer;
    
56.     }
    
57.   }
    
58. 
    
59.   @keyframes scroll {
    
60.     to {
    
61.       transform: translateX(-50%);
    
62.     }
    
63.   }
    
64. </style>
    
65. <div id="oBlk">
    
66.   <div id="pa">
    
67.     <div id="son">
    
68.       <img src="https://pan.suyanw.cn/view.php/1519882c59ee4ce6a7022bee4f9fc8ea.jpg" loading="lazy" alt="">
    
69.       <img src="https://pan.suyanw.cn/view.php/912ffa6aa98dbb6510c3291a07b9c5cd.jpg" loading="lazy" alt="">
    
70.       <img src="https://pan.suyanw.cn/view.php/17be93ae9fc76acf4eebf8332ce2c5fa.jpg" loading="lazy" alt="">
    
71.       <img src="https://pan.suyanw.cn/view.php/1519882c59ee4ce6a7022bee4f9fc8ea.jpg" loading="lazy" alt="">
    
72.       <img src="https://pan.suyanw.cn/view.php/912ffa6aa98dbb6510c3291a07b9c5cd.jpg" loading="lazy" alt="">
    
73.       <img src="https://pan.suyanw.cn/view.php/17be93ae9fc76acf4eebf8332ce2c5fa.jpg" loading="lazy" alt="">
    
74.     </div>
    
75.   </div>
    
76.   <div id="text-layer"> 图一是微缩城的大门。 图二微缩城入口处，有一座格列佛金属雕像，看过《格列佛游记》的都知道，他是游记小说里第一位进入“微缩小人国”的人。图三是城内景观的一小部分。 </div>
    
77. </div>
    
78. <audio src="https://music.163.com/song/media/outer/url?id=28606435.mp3" loop="" autoplay=""></audio>
    
79. <script>
    
80.   const synthObj = window.speechSynthesis;
    
81.   const mObj = document.querySelector("audio");
    
82.   const dTxt = document.querySelector('#text-layer');
    
83.   dTxt.onmouseenter = (e) => {
    
84.     synthObj.cancel();
    
85.     mObj.pause();
    
86.     if (!e.currentTarget.innerHTML) return;
    
87.     let voiceObj = new SpeechSynthesisUtterance(e.currentTarget.innerHTML);
    
88.     voiceObj.lang = "zh-CN";
    
89.     voiceObj.rate = 0.9; //语速，数字越小读得越慢
    
90.     synthObj.speak(voiceObj);
    
91.   };
    
92.   dTxt.onmouseout = () => {
    
93.     synthObj.cancel();
    
94.     mObj.play();
    
95.   }
    
96. </script>

复制代码

夕阳黄昏

魏淑芬 发表于 2026-8-11 14:16
我用的是枫丹回复我给的代码，应该就是您给她的吧。
我刚才用编辑看了一下我的帖子的原码，怎么和我发帖 ...

论坛有时确实会自作主张做些无用且可能有害的事，但您这次论坛不会背这锅。

魏淑芬

夕阳黄昏 发表于 2026-8-11 14:28
这不是的。我把1#的代码复制了一份，加上了缺失的部分（79 ~ 96）

谢谢夕阳老师！我收藏了，以后当做模版使用了。

魏淑芬

夕阳黄昏 发表于 2026-8-11 14:31
论坛有时确实会自作主张做些无用且可能有害的事，但您这次论坛不会背这锅。

噢，不是论坛的锅，那就好。

夕阳黄昏

魏淑芬 发表于 2026-8-11 14:38
谢谢夕阳老师！我收藏了，以后当做模版使用了。

复制您代码时没注意，第7行是无用的。