滑动多图上下音频音乐播放器

源代码

<section style="margin: 20px 0px; text-align: left;"><section style="margin-left:14px;display:inline-block;"><section><section style="width:35px;transform:rotateZ(0deg);"><img src="https://cdn.file.mixinnet.cn/htmlImg/6ecee08996162026dbf82a0b00330380.png" style="display: block; width: 100%; height: auto;" alt=""></section><section style="border-bottom:solid 1px #49494b;padding:0px 0px 3px;"><section style="margin:2px 0px 0px;color: #fff; font-size: 18px; letter-spacing:2px;background-color:#f39378;padding:5px 15px;"><p><strong>课程语音讲解</strong></p></section></section></section></section><section style="margin-top:-15px;border:solid 1px #f39378;padding:30px 14px 25px;"><section style="white-space: normal; border: 0px none; text-align: center; padding: 0px; overflow: hidden;"><section style="white-space: nowrap; width:100%; overflow-x: scroll;"><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;text-align: center;width:100%;padding:0px 0px 10px;"><img src="https://cdn.file.mixinnet.cn/htmlImg/54202bb981fdd359292f236c9d15a02b.png" style="display: block; width: 100%; height: auto;" data-brush="img" data-copyrighted="6262"></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;text-align: center;width:100%;padding:0px 0px 10px;"><img src="https://cdn.file.mixinnet.cn/htmlImg/54202bb981fdd359292f236c9d15a02b.png" style="display: block; width: 100%; height: auto;" data-brush="img" data-copyrighted="6262"></section></section></section><section style="margin:8px 0px 0px;color:#bfc1c4;font-size:14px;letter-spacing:2px;"><p style="text-align: center;">                    左右滑动查看更多</p></section><section style="display: flex;justify-content: center;align-items:center;"><section style="display: inline-block;width: 100%;vertical-align: middle;height: auto;box-sizing: border-box;"><section style="overflow: hidden;line-height: 0;box-sizing: border-box;"><svg viewBox="0 0 1000 100" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;"><foreignObject width="100%" height="100%" style="box-sizing: border-box;"><svg style="width:75px;height:75px;background-repeat: no-repeat;background-size: 100%;pointer-events: none;background-image: url(/public/static/img/dian.png?id=mmbiz_png/Ljib4So7yuWggddic9eb7sqkrsedickWCudft5Krg2ZicYW0pVm62yVibw9SlIZyPCgqdbV54W0DEgthnKVlEkW3y8Q/0?wx_fmt=png);box-sizing: border-box;" viewBox="0 0 1000 100"></svg></foreignObject><foreignObject width="100%" height="100%" style="box-sizing: border-box;"><section style="overflow: hidden;opacity: 0;transform: scale(80) translate(-450px, -5px);-webkit-transform: scale(80) translate(-450px, -5px);-moz-transform: scale(80) translate(-450px, -5px);-o-transform: scale(80) translate(-450px, -5px);box-sizing: border-box;"><qqmusic scrolling="no" frameborder="0" musicid="104775916" mid="003ULL5o2D7UMu" albumurl="https://cdn.file.mixinnet.cn/htmlImg/b9e1b0b8cd67313c7e2c2ae13fead7d7.jpg" audiourl="undefined" music_name="陪你度过漫长岁月" commentid="" singer="陈奕迅" play_length="undefined" src="/cgi-bin/readtemplate/?t=tmpl/qqmusic_tmpl&singer=%E9%99%88%E5%A5%95%E8%BF%85&music_name=%E9%99%AA%E4%BD%A0%E5%BA%A6%E8%BF%87%E6%BC%AB%E9%95%BF%E5%B2%81%E6%9C%88&albumurl=https%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT002R68x68M000002DAg4x3jVzHI.jpg&musictype=1" musictype="1" otherid="002DAg4x3jVzHI" albumid="002jmqDQ1bMQpV" jumpurlkey=""><section><section><strong>陪你度过漫长岁月</strong><section>                                                    陈奕迅</section></section><span><em></em><img src="https://cdn.file.mixinnet.cn/htmlImg/b9e1b0b8cd67313c7e2c2ae13fead7d7.jpg"></span></section></qqmusic></section></foreignObject></svg></section></section></section><section style="width:90%;margin-left:auto;margin-top:-37px;"><section style="display: flex;justify-content: space-between;align-items:center;"><section style="color:#49494b;font-size:12px;"><p>                            00:00</p></section><section style="color:#49494b;font-size:12px;"><p>                            02:56</p></section></section><section style="display: flex;justify-content: center;align-items:center;"><section style="width:6px;height:6px;background-color:#49494b;border-radius:50%;"></section><section style="width:98%;height:2px;background-color:#f39378;"></section></section></section></section></section>

关于我们

快捷导航

联系我们

关于我们