孔雀舞改装版代码分享

马黑黑

修改了队长的代码，就按这个：

1. <style>
   
2. .outerbox {
   
3.         position: relative;
   
4.         left: -242px;
   
5.         display: flex;
   
6.         justify-content: center;
   
7.         align-items: center;
   
8.         width: 1080px;
   
9.         height: 666px;
   
10.         background: #888 url('https://pic.imgdb.cn/item/6286f8d809475431290823e9.jpg') no-repeat center/cover;
    
11.         box-shadow: 2px 2px 8px rgba(0,0,0,.95);
    
12.         perspective: 3000px;
    
13. }
    
14. .innerbox {
    
15.         background: #666;
    
16.         box-shadow: 2px 2px 6px rgba(0,0,0,.85);
    
17.         transform-style: preserve-3d;
    
18.         animation: flyout 6s linear infinite alternate;
    
19. }
    
20. @keyframes flyout {
    
21.         0% { transform: rotate(0turn); width: 1px; height: 1px; }
    
22.         80%, 100% { transform: rotate(2turn); width: 600px; height: 600px; }
    
23. }
    
24. </style>
    
25. 
    
26. <div class="outerbox">
    
27.         <div class="innerbox"></div>
    
28. </div>
    
29. 
    
30. <script>
    
31. 
    
32. let picAr = [
    
33.         'https://pic.imgdb.cn/item/6286f9ce0947543129098349.jpg',
    
34.         'https://pic.imgdb.cn/item/6286fa9f09475431290ad48e.jpg',
    
35.         'https://pic.imgdb.cn/item/6286fb2809475431290b5d51.jpg',
    
36.         'https://pic.imgdb.cn/item/6286fbb809475431290bb0aa.jpg',
    
37.         'https://pic.imgdb.cn/item/6286fc9109475431290c3227.jpg'
    
38. ];
    
39. 
    
40. let idx = 0;
    
41. let outer = document.querySelector('.outerbox');
    
42. let inner = document.querySelector('.innerbox');
    
43. let aud = document.createElement('iframe');
    
44. aud.src = 'https://music.163.com/outchain/player?type=2&id=1359398436&auto=1&height=66';
    
45. aud.style.display = 'none';
    
46. outer.appendChild(aud);
    
47. 
    
48. setBgImg();
    
49. 
    
50. setInterval(setBgImg, 12000);
    
51. 
    
52. function setBgImg(){
    
53.         inner.style = `background: url(${picAr[idx]}) no-repeat center/cover`;
    
54.         idx += 1;
    
55.         if(idx >= picAr.length) idx = 0;
    
56. }
    
57. 
    
58. </script>

复制代码

马黑黑

说明：

① 第10行：背景图片地址要填写正确的图片地址，这是帖子背景图；

② 第33行起，图片地址数组，一行写一个地址，每个地址头尾都有小角单引号（也可以用小角双引号，前后统一即可），每个地址结束后用小角逗号收尾，但最后一个地址不能用逗号收尾；

③第43-46行是网易云音乐地址

红影

这个即使没有图片序号也可以了。黑黑辛苦

马黑黑

红影 发表于 2022-5-19 22:11
这个即使没有图片序号也可以了。黑黑辛苦

图片地址直接加入数组

岩新新

欣赏学习！

马黑黑

岩新新 发表于 2022-5-19 22:40
欣赏学习！

马黑黑

醉美水芙蓉 发表于 2022-5-20 07:06
@队长还没有看见呢？

队长会看到的

马黑黑

根据队长试用的结果，重新做了修正

加林森

醉美水芙蓉 发表于 2022-5-20 07:06
@队长还没有看见呢？

谢谢水芙蓉！

加林森

马黑黑 发表于 2022-5-20 13:03
根据队长试用的结果，重新做了修正

谢谢老黑！

小辣椒

黑黑这个代码很通俗了，高手特棒~

马黑黑

小辣椒 发表于 2022-5-20 13:36
黑黑这个代码很通俗了，高手特棒~

早上发的时候有点急，可能存在一些错误，队长用了出问题就顺势改改，就用队长的代码

马黑黑

加林森 发表于 2022-5-20 13:30
谢谢老黑！

不好意思呢，是我早上太忙，给的代码没测试好

加林森

马黑黑 发表于 2022-5-20 18:07
不好意思呢，是我早上太忙，给的代码没测试好

好的好的。现在都正常了就好啊。

马黑黑

加林森 发表于 2022-5-20 18:31
好的好的。现在都正常了就好啊。

加林森

马黑黑 发表于 2022-5-20 19:08

红影

马黑黑 发表于 2022-5-19 22:15
图片地址直接加入数组

嗯嗯，辛苦黑黑了，空了我也做一个去

马黑黑

红影 发表于 2022-5-20 21:53
嗯嗯，辛苦黑黑了，空了我也做一个去