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

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

本帖最后由 霜染枫丹 于 2026-8-6 01:00 编辑 <br /><br /><style>

:root {
    /* 整体外框大小 */
    --wrap-w: 1300px;
    --wrap-h: 731px;

    /* 中间轮播窗口大小（画中画小窗口） */
    --pa-w: 1024px;
    --pa-h: 576px;

    /* 文字位置：直接改数字，top距离上边，left距离左边 */
    --text-top: 650px;
    --text-left: 360px;

    /* 文字样式 */
    --text-size: 20px;
    --text-color: #ffffff;

    /* 轮播动画时长，秒数越大滚动越慢 */
    --anim-time: 28s;
}

/* 最外层总容器（画中画大盒子，底层背景在这里） */
.wrap-box {
    width: var(--wrap-w);
    height: var(--wrap-h);
    margin: 20px auto;
    position: relative;
    background-image: url("https://ff.xiaoqiaodali.top:5401/i/2026/08/05/6a734f9bdd76b.png");
    background-size: cover; /* 建议加上这个，让背景图铺满容器 */
    background-position: center;
    background-color: #2c3e50; /* 图片加载失败时的底色 */
}

/* 中间层：你的原有滚动轮播窗口 */
.pa {
    width: var(--pa-w);
    height: var(--pa-h);
    border: 8px dotted gray;
    overflow: hidden;
    position: absolute;
   
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    --state: running;

}
.pa:hover {
    --state: paused;
}
.son {
    position: absolute;
    height: 100%;
    white-space: nowrap;
    animation: scroll var(--anim-time) linear infinite var(--state);
}
.son img {
    height: 100%;
    margin: 0 6px;
}
@keyframes scroll {
    to { transform: translateX(-50%); }
}

/* 顶层文字说明层，z-index最高浮在最上面 */
.text-layer {
    position: absolute;
    z-index: 99;
    top: var(--text-top);
    left: var(--text-left);
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: rgba(0,0,0,0.45);
    padding: 8px 16px;
    border-radius: 6px;
    max-width: 500px;
}

/* 语音按钮样式 */
.btn-group {
    text-align: center;
    margin: 10px 0;
}
.btn-group button {
    padding: 6px 14px;
    font-size: 16px;
    margin: 0 4px;
    cursor: pointer;
}
</style>

<!-- HTML结构：外层大背景盒子 -->
<div class="wrap-box">
    <!-- 顶层文字层，修改这里双引号内为你的说明文字 -->
    <div class="text-layer">
      旋覆花，中药名。为菊科旋覆花属植物旋覆花。具有降气，消痰，行水，止呕的功效。拍摄于明城墙遗址公园。
    </div>

    <!-- 中间滚动轮播，已修正图片链接错误和懒加载属性 -->
    <div class="pa">
      <div class="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>

<div class="btn-group">
    <button onclick="voicePlay()">&#128266;朗读说明文字</button>
    <button onclick="voiceStop()">&#128721;停止朗读</button>
</div>
<p style="text-align:center">鼠标指针移动到轮播方框，滚动动画暂停</p>

<script>
//浏览器自带语音朗读，读取上面.text-layer里面的文字
const synth = window.speechSynthesis;
let voiceObj = null;

function voicePlay() {
    voiceStop();
    let txt = document.querySelector(".text-layer").innerText.trim();
    if (!txt) return;
    voiceObj = new SpeechSynthesisUtterance(txt);
    voiceObj.lang = "zh-CN";
    voiceObj.rate = 0.92; //语速，数字越小读得越慢
    synth.speak(voiceObj);
}

function voiceStop() {
    synth.cancel();
}
</script>

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

看个意思吧，就是实验，不算作品。在宽版的模板里正常，就搬过来了{:4_173:}
页: [1]
查看完整版本: 有说明的图片轮播 学习马老师教程制作