杨帆 发表于 2024-12-12 23:10

马黑黑 发表于 2024-12-12 20:14
（一）轮播暂停上次说过，需要看轮播实现机制是否提供管理接口，它若不提供是无法控制的，或需要你加入可控 ...

好的，明白了，由衷感谢马老师悉心指导与热诚帮助{:4_190:}

杨帆 发表于 2024-12-13 01:45

马黑黑 发表于 2024-12-12 20:14
（一）轮播暂停上次说过，需要看轮播实现机制是否提供管理接口，它若不提供是无法控制的，或需要你加入可控 ...

请老师帮助看看此轮播实现机制是否提供有管理接口，或帮助加入可控机制呗；由衷感谢{:4_190:}

马黑黑 发表于 2024-12-13 18:41

杨帆 发表于 2024-12-13 01:45
请老师帮助看看此轮播实现机制是否提供有管理接口，或帮助加入可控机制呗；由衷感谢

没有。但是它使用 setTimeout 定时器，你可以参考我的简单图片轮播演示改进版对他进行操作。

杨帆 发表于 2024-12-13 18:44

马黑黑 发表于 2024-12-13 18:41
没有。但是它使用 setTimeout 定时器，你可以参考我的简单图片轮播演示改进版对他进行操作。

好的，谢谢老师，我试试看{:4_190:}

杨帆 发表于 2024-12-15 14:22

马黑黑 发表于 2024-12-13 18:41
没有。但是它使用 setTimeout 定时器，你可以参考我的简单图片轮播演示改进版对他进行操作。

虽然它使用 setTimeout 定时器

可参考您的简单图片轮播演示改进版尝试了几次仍无果

请老师明示！谢谢{:4_190:}

杨帆 发表于 2025-2-25 23:42

本帖最后由 杨帆 于 2025-3-15 18:34 编辑

今天是315，问题终于得到解决！

感谢马老师指导，感谢DS的帮助！

源码及效果分享在下楼{:4_185:}

杨帆 发表于 2025-3-15 18:31

本帖最后由 杨帆 于 2025-3-15 18:43 编辑 <br /><br /><style>
#tz {margin: 130px 0 30px calc(50% - 720px);width: 1280px; height: 720px;position: relative;z-index:1;border-radius:32px;overflow: hidden; }
#btnFs {position: absolute;left:92%;top: 5%;padding: 6px;background: green;color: white;border: 2px solid white;border-radius: 8px;cursor: pointer;pointer-events: auto;z-index: 2;}
#player {position: absolute;width:100px;height:100px;top:10px;left:10px; mix-blend-mode: multiply;box-shadow: inset 0 0 15px var(--inset);animation: rot 10s linear infinite;cursor: pointer; pointer-events: auto; opacity: 0;}
#tz:hover #player{opacity: 0.9; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz">
        <IMG style="FILTER: progid:DXImageTransform.Microsoft.Stretch(stretchStyle='POP')" height="100%" src="https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif" width="100%" border="0" name="rittai" />
        <img id="player" alt="" src="https://xlaj.cn/upfile/202411/16/ann.png" title="播放/暂停" />
        <audio id="aud" src="https://www.joy127.com/url/118013.mp3" autoplay="" loop=""></audio>
        <span id="btnFs"></span>
</div>

<script type="module">
        import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        qp.fs('tz','btnFs');
</script>

<script>
var Ga = new Array();
Ga = "https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif";
Ga = "https://pic.imgdb.cn/item/674d81d5d0e0a243d4dbf77e.gif";
Ga = "https://pic.imgdb.cn/item/674d81f8d0e0a243d4dbf7e1.gif";
Ga = "https://pic.imgdb.cn/item/674d8215d0e0a243d4dbf830.gif";
Ga = "https://pic.imgdb.cn/item/674d822ed0e0a243d4dbf862.gif";
Ga = "https://pic.imgdb.cn/item/674d8244d0e0a243d4dbf891.gif";

var hayasa = 4500;
var suu = 1;
var iTransNumber = 0;
var garTransitions = new Array();
garTransitions = "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push')";
garTransitions = "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='pop')";
var kirikaeGa = new Array();
for (var kazu = 0; kazu < Ga.length; kazu++) {
    kirikaeGa = new Image();
    kirikaeGa.src = Ga;
}

var slideTimer; // 用于存储定时器的变量
var isSliding = true; // 轮播状态
var isAudioPlaying = true; // 音频状态

function kirikae() {
    if (window.createPopup) rittai.style.filter = garTransitions;
    iTransNumber++;
    if (iTransNumber == garTransitions.length) iTransNumber = 0;

    if (window.createPopup) rittai.filters.apply();

    document.images.rittai.src = kirikaeGa.src;
    if (window.createPopup) rittai.filters.play();
    suu++;
    if (suu == kirikaeGa.length) suu = 0;
    slideTimer = setTimeout(kirikae, hayasa); // 重新设置定时器
}

// 初始化轮播
window.onload = function() {
    slideTimer = setTimeout(kirikae, hayasa);
};

// 更新按钮状态文字和动画
function updateButtonState() {
    if (isAudioPlaying && isSliding) {
      player.title = "暂停";
      player.style.animationPlayState = 'running';
    } else if (!isAudioPlaying && !isSliding) {
      player.title = "播放";
      player.style.animationPlayState = 'paused';
    } else if (isAudioPlaying && !isSliding) {
      player.title = "暂停音频，继续轮播";
      player.style.animationPlayState = 'paused';
    } else if (!isAudioPlaying && isSliding) {
      player.title = "播放音频，暂停轮播";
      player.style.animationPlayState = 'running';
    }
}

// 按钮点击事件
player.onclick = function() {
    // 切换音频状态
    if (aud.paused) {
      aud.play();
      isAudioPlaying = true;
    } else {
      aud.pause();
      isAudioPlaying = false;
    }

    // 切换轮播状态
    if (isSliding) {
      clearTimeout(slideTimer);
      isSliding = false;
    } else {
      slideTimer = setTimeout(kirikae, hayasa);
      isSliding = true;
    }

    // 更新按钮状态
    updateButtonState();
};

// 音频状态变化时更新按钮状态
aud.oncanplay = aud.onplaying = aud.onpause = function() {
    isAudioPlaying = !aud.paused;
    updateButtonState();
};

// 初始化按钮状态
updateButtonState();
</script>
页: 1 [2]
查看完整版本: 请教马老师：请控制音乐、图片轮播、帖子位置【已解决】