请教马老师：请控制音乐、图片轮播、帖子位置【已解决】

杨帆

马黑黑

你这个是JS做成的效果。加音乐，可以考虑的实现方式有多重：

（一）在JS中使用加入音乐；
（二）使用纯HTML代码加入音乐，再在JS中控制它。

另外，你需要理解你所使用的JS代码是如何操作DOM的，这样你才可以让轮番的图片定位。

杨帆

马黑黑 发表于 2024-12-9 22:08
你这个是JS做成的效果。加音乐，可以考虑的实现方式有多重：

（一）在JS中使用加入音乐；

方向明白了，我试一试看看！谢谢马老师

杨帆

又看了您的相关教程，还只会三部分加音乐呀。

请问老师：@马黑黑
（一）如何在JS中使用加入音乐？
（二）如何使用纯HTML代码加入音乐，再在JS中控制它？
谢谢老师

亚伦影音工作室

马老师是这方面的专家，他经验丰富，多请教！

杨帆

亚伦影音工作室 发表于 2024-12-10 11:38
马老师是这方面的专家，他经验丰富，多请教！

对，必须多向马老师专家请教！

周二快乐，问好亚伦老师~

马黑黑

杨帆 发表于 2024-12-10 02:05
又看了您的相关教程，还只会三部分加音乐呀。

请问老师：@马黑黑

这个其实是非常简单的。你所使用的JS代码，它其实是通过JS控制控制 img标签，你可以把 img标签 放入帖子容器中，以便像平时做帖一样控制帖子的位置、加入 audio标签和其他相关按钮。JS部分，将所引用的JS代码视为一个单位，然后在其后加入平时做帖子用到的代码（如 mState() 函数、audio的事件监听、按钮的控制等等）。楼下是简单整理过的代码框架

马黑黑

<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[0]="https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif";
Ga[1]="https://pic.imgdb.cn/item/674d81d5d0e0a243d4dbf77e.gif";
Ga[2]="https://pic.imgdb.cn/item/674d81f8d0e0a243d4dbf7e1.gif";
Ga[3]="https://pic.imgdb.cn/item/674d8215d0e0a243d4dbf830.gif";
Ga[4]="https://pic.imgdb.cn/item/674d822ed0e0a243d4dbf862.gif";
Ga[5]="https://pic.imgdb.cn/item/674d8244d0e0a243d4dbf891.gif";

var hayasa=5000;
var suu =1;
var iTransNumber=0;
var garTransitions = new Array();

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

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

if (window.createPopup) rittai.filters[0].apply();

document.images.rittai.src=kirikaeGa[suu].src;
if (window.createPopup) rittai.filters[0].play();
suu++;
if (suu==kirikaeGa.length) suu=0;
setTimeout("kirikae()",hayasa)};
window.onload = new Function("setTimeout('kirikae()',hayasa)");

//下面加入常规帖子代码
// .....
</script>

马黑黑

10-43行代码是你引用的原始代码（略作改动：删除了注释和不必要的分行）。上述代码只是框架，需要加入自己的音频元素、按钮等，并做必要的css设置。

杨帆

@马黑黑  辛苦您了，马老师！我刚看到并认真学习，很有收获，一会继续学习、尝试  

特喜欢您深入浅出的讲解，举重若轻的格局，诲人不倦的情怀，由衷谢谢您

马黑黑

杨帆 发表于 2024-12-10 21:43
@马黑黑  辛苦您了，马老师！我刚看到并认真学习，很有收获，一会继续学习、尝试  

特喜欢您深入浅出的 ...

可以看出你的理解能力和组织能力很强

杨帆

马黑黑 发表于 2024-12-11 07:38
可以看出你的理解能力和组织能力很强

谢谢老师鼓励！主要得益于您指导有方

马黑黑

杨帆 发表于 2024-12-11 11:26
谢谢老师鼓励！主要得益于您指导有方

指导谈不上，给出个人的一些见解而已

杨帆

马黑黑 发表于 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 将制作好的帖子弄过来，这可能因为跨域等因素而涉及到诸多问题，视资源所在服务器的相关 ...

马老师您真厉害！很多对我都是新知识，我好好学习、认真尝试一下。谢谢老师

杨帆

马黑黑 发表于 2024-12-11 17:25
轮播的暂停你得研究它的代码，看看他有没有课暂停的机制。这个是很古老的轮播实现方法，我没有细看。
全 ...

马老师您好！在您的悉心指导下，本帖的音乐、帖子位置等控制问题以及发网页贴问题，已圆满解决！

现在的问题是，无法实现轮播暂停，还有全屏切换时不连续，就是说原来是播放状态一切换就成了暂停状态，反之亦然。

另外，我是用文本文档写帖子代码的，不知您说的控制台以及查找代码错误并修正在哪找、如何用，辛苦老师给予指导！谢谢~

马黑黑

（一）轮播暂停上次说过，需要看轮播实现机制是否提供管理接口，它若不提供是无法控制的，或需要你加入可控机制；

（二）常规/全屏切换的播放状态，与你使用的控制音频播放暂停的点击对象有关：你的代码里使用 tz.onclick 事件，就是帖子容器的点击事件，这样的话，tz 下的子元素的点击会穿透自身直达 tz 父元素，这就触发了 tz.onclick 事件，所以音乐的播放暂停就与上一次的状态相反。这个原理术语叫冒泡。改为左上角的图片点击就可以了：player.onclick = () => ...

（三）写代码用什么编辑器没多大关系，但建议使用专业的产品，国人开发的 notepad-- 很不错：

https://gitee.com/cxasm/notepad--/releases/tag/v2.20.1

控制台则是浏览器集成的 DevTools 工具，任何现代浏览器，按 F12 都可以调出 DT 工具栏，里面最常用的是控制台，它可以帮助使用者查看JS运行状况，特别是出错时会有提示