请教马老师：请控制音乐、图片轮播、帖子位置【已解决】
本帖最后由 杨帆 于 2025-3-15 18:40 编辑 <br /><br /><style>#tz {margin: 130px 0 30px calc(50% - 720px);width: 1280px; height: 720px;position: relative;pointer-events: none;z-index:1;
}
#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:120px;height:120px;top:10px;left:10px; mix-blend-mode: multiply;box-shadow: inset 0 0 15px var(--inset);animation: rot 10s linear infinitevar(--state);cursor: pointer; pointer-events: auto;
}
#player:hover { filter: drop-shadow(0 0 80px Gold); }
@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=5000;
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 (kazu=0;kazu<Ga.length;kazu++){
kirikaeGa=new Image()
kirikaeGa.src=Ga}
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;
setTimeout("kirikae()",hayasa)};
window.onload = new Function("setTimeout('kirikae()',hayasa)");
var mState = () => {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.title = aud.paused ? '播放' : '暂停';
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
你这个是JS做成的效果。加音乐，可以考虑的实现方式有多重：
（一）在JS中使用加入音乐；
（二）使用纯HTML代码加入音乐，再在JS中控制它。
另外，你需要理解你所使用的JS代码是如何操作DOM的，这样你才可以让轮番的图片定位。 马黑黑 发表于 2024-12-9 22:08
你这个是JS做成的效果。加音乐，可以考虑的实现方式有多重：
（一）在JS中使用加入音乐；
方向明白了，我试一试看看！谢谢马老师{:4_190:} 又看了您的相关教程，还只会三部分加音乐呀。
请问老师：@马黑黑
（一）如何在JS中使用加入音乐？
（二）如何使用纯HTML代码加入音乐，再在JS中控制它？
谢谢老师{:4_190:} 马老师是这方面的专家，他经验丰富，多请教！ 亚伦影音工作室 发表于 2024-12-10 11:38
马老师是这方面的专家，他经验丰富，多请教！
对，必须多向马老师专家请教！
周二快乐，问好亚伦老师~ 本帖最后由 马黑黑 于 2024-12-10 19:35 编辑
杨帆 发表于 2024-12-10 02:05
又看了您的相关教程，还只会三部分加音乐呀。
请问老师：@马黑黑
这个其实是非常简单的。你所使用的JS代码，它其实是通过JS控制控制 img标签，你可以把 img标签 放入帖子容器中，以便像平时做帖一样控制帖子的位置、加入 audio标签和其他相关按钮。JS部分，将所引用的JS代码视为一个单位，然后在其后加入平时做帖子用到的代码（如 mState() 函数、audio的事件监听、按钮的控制等等）。楼下是简单整理过的代码框架 <div id="hEdiv"><pre id="hEpre">
<style>
#tz { margin: auto; width: 1280px; height: 720px; position: relative; }
</style>
<div id="tz">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.Stretch(stretchStyle='POP')" height="720" src="https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif" width="1280" border="0" name="rittai" />
</div>
<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=5000;
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 (kazu=0;kazu<Ga.length;kazu++){
kirikaeGa=new Image()
kirikaeGa.src=Ga}
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;
setTimeout("kirikae()",hayasa)};
window.onload = new Function("setTimeout('kirikae()',hayasa)");
//下面加入常规帖子代码
// .....
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
10-43行代码是你引用的原始代码（略作改动：删除了注释和不必要的分行）。上述代码只是框架，需要加入自己的音频元素、按钮等，并做必要的css设置。 本帖最后由 杨帆 于 2024-12-10 21:47 编辑
@马黑黑辛苦您了，马老师！我刚看到并认真学习，很有收获，一会继续学习、尝试
特喜欢您深入浅出的讲解，举重若轻的格局，诲人不倦的情怀，由衷谢谢您{:4_191:} 杨帆 发表于 2024-12-10 21:43
@马黑黑辛苦您了，马老师！我刚看到并认真学习，很有收获，一会继续学习、尝试
特喜欢您深入浅出的 ...
可以看出你的理解能力和组织能力很强 马黑黑 发表于 2024-12-11 07:38
可以看出你的理解能力和组织能力很强
谢谢老师鼓励！主要得益于您指导有方{:4_191:} 杨帆 发表于 2024-12-11 11:26
谢谢老师鼓励！主要得益于您指导有方
指导谈不上，给出个人的一些见解而已 本帖最后由 杨帆 于 2024-12-11 16:13 编辑
马黑黑 发表于 2024-12-11 11:53
指导谈不上，给出个人的一些见解而已
谢谢虚怀若谷的马老师！
请您帮我看看1楼的代码~不知为何，发论坛之后，小播也不动了
还有，如何控制此贴的轮播？如何让此贴真正实现全屏呢？谢谢
杨帆 发表于 2024-12-11 13:37
谢谢虚怀若谷的马老师！
请您帮我看看1楼的代码~不知为何，发论坛之后，小播也不动了
轮播的暂停你得研究它的代码，看看他有没有课暂停的机制。这个是很古老的轮播实现方法，我没有细看。
全屏的话，你只需要将图片设置为100%宽高，然后让帖子容器作为全屏对象就可以了。
至于其他问题，你应该在本地测试无误后再发到论坛，可以通过控制台查看可能存在的错误并修正它们。 马黑黑 发表于 2024-12-11 17:25
轮播的暂停你得研究它的代码，看看他有没有课暂停的机制。这个是很古老的轮播实现方法，我没有细看。
全 ...
好的，由衷感谢马老师指导，我再学习、尝试一下 杨帆 发表于 2024-12-11 13:37
谢谢虚怀若谷的马老师！
请您帮我看看1楼的代码~不知为何，发论坛之后，小播也不动了
你使用了 iframe 将制作好的帖子弄过来，这可能因为跨域等因素而涉及到诸多问题，视资源所在服务器的相关设置而定。一般而言，iframe 标签里可以尝试加入 allowfullscreen="true" 它会允许全屏，过去还可以加入 allow="autoplay" 允许自动播放里面的媒体。 马黑黑 发表于 2024-12-11 17:37
你使用了 iframe 将制作好的帖子弄过来，这可能因为跨域等因素而涉及到诸多问题，视资源所在服务器的相关 ...
马老师您真厉害！很多对我都是新知识，我好好学习、认真尝试一下。谢谢老师{:4_190:} 本帖最后由 杨帆 于 2024-12-12 15:30 编辑
马黑黑 发表于 2024-12-11 17:25
轮播的暂停你得研究它的代码，看看他有没有课暂停的机制。这个是很古老的轮播实现方法，我没有细看。
全 ...
马老师您好！在您的悉心指导下，本帖的音乐、帖子位置等控制问题以及发网页贴问题，已圆满解决！
现在的问题是，无法实现轮播暂停，还有全屏切换时不连续，就是说原来是播放状态一切换就成了暂停状态，反之亦然。
另外，我是用文本文档写帖子代码的，不知您说的控制台以及查找代码错误并修正在哪找、如何用，辛苦老师给予指导！谢谢~ 本帖最后由 马黑黑 于 2024-12-12 20:15 编辑
（一）轮播暂停上次说过，需要看轮播实现机制是否提供管理接口，它若不提供是无法控制的，或需要你加入可控机制；
（二）常规/全屏切换的播放状态，与你使用的控制音频播放暂停的点击对象有关：你的代码里使用 tz.onclick 事件，就是帖子容器的点击事件，这样的话，tz 下的子元素的点击会穿透自身直达 tz 父元素，这就触发了 tz.onclick 事件，所以音乐的播放暂停就与上一次的状态相反。这个原理术语叫冒泡。改为左上角的图片点击就可以了：player.onclick = () => ...
（三）写代码用什么编辑器没多大关系，但建议使用专业的产品，国人开发的 notepad-- 很不错：
https://gitee.com/cxasm/notepad--/releases/tag/v2.20.1
控制台则是浏览器集成的 DevTools 工具，任何现代浏览器，按 F12 都可以调出 DT 工具栏，里面最常用的是控制台，它可以帮助使用者查看JS运行状况，特别是出错时会有提示
页:
[1]
2