【音畫素材】全屏大圖自動切換

闲云

闲云

代码如下：

1. <div style="position:absolute;z-index:32768;background:none;width:100%;left:-2px;margin-top:86px;">
   
2. <style>
   
3.   .container0 {
   
4.   margin: 50px auto;
   
5.   width: 1194px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 14px #880000; overflow: hidden;
   
6.   height: 620px;
   
7. border: 1px solid;
   
8. background: #333 url('https://pic.imgdb.cn/item/671ce499d29ded1a8c4a28e2.jpg') no-repeat center/cover; overflow: hidden;
   
9.   position: relative;
   
10. }
    
11. .photo {
    
12.   position: absolute;
    
13. width: 100%;
    
14.   height: 100%;transform: scale3d(0,0,-300) skew(0,60deg);
    
15.   animation: round 32s infinite;
    
16.   opacity: 0;
    
17. }
    
18. @keyframes round {
    
19.   5% {opacity: 1;}
    
20. 12% {opacity: 1;transform:  scale(1)}
    
21. 18% {opacity: 0;transform:  scale(3)}
    
22. }
    
23. img:nth-child(1) {animation-delay: 28s;}
    
24. img:nth-child(2) {animation-delay: 24s;}
    
25. img:nth-child(3) {animation-delay: 20s;}
    
26. img:nth-child(4) {animation-delay: 16s;}
    
27. img:nth-child(5) {animation-delay: 12s;}
    
28. img:nth-child(6) { animation-delay: 8s;}
    
29. img:nth-child(7) {animation-delay: 4s;}
    
30. img:nth-child(8) {animation-delay: 0s;}
    
31.     </style>
    
32. <div class="container0">
    
33.   <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c1516d1.jpg" alt="">
    
34.   <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c1516db.jpg" alt="">
    
35.   <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c1516e8.jpg" alt="">
    
36.   <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c1516f9.jpg" alt="">
    
37. <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c151705.jpg" alt="">
    
38. <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c151716.jpg" alt="">
    
39. <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c151723.jpg" alt="">
    
40. <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c151735.jpg" alt="">
    
41. <div class="container">
    
42.       <div class="btn">
    
43. <span id="bf" onclick="bf();" style="width: 120px; height: 120px;z-index: 550;position: absolute;top:-60px; left:880px;"></span>
    
44.         <span id="bf" onclick="rbf();"></span>
    
45.       </div>
    
46.      <div class="items">
    
47. <div class="lrc">
    
48.         <ul id="ullrc">
    
49.          </ul>
    
50.       </div>
    
51. </div>
    
52. </div>
    
53. </div></div><br>
    
54. <div style="height:740px"></div>
    
55. <div style="position:absolute;z-index:32768;background:none;width:100%;left:-34px;margin-top:6px;">
    
56. <iframe allowfullscreen="true" border="0" frameborder="no" framespacing="0" height="50" scrolling="no" src="//player.bilibili.com/player.html?isOutside=true&amp;aid=493429452&amp;bvid=BV1AN411u7P3&amp;cid=1333680042&amp;p=1" width="1260"></iframe>
    
57. </div><div style="height:90px"></div>
    

复制代码

老谟深虑

       欣赏老乡的全屏大图自动切换，太漂亮了，欣赏点赞！

闲云

老谟深虑 发表于 2024-10-31 16:22
欣赏老乡的全屏大图自动切换，太漂亮了，欣赏点赞！

非常感谢老乡的关注支持，下午好！

风清

欣赏闲云老师大图自动切换，太美了！您真棒！玩得轻松自如，向您学习！

闲云

风清 发表于 2024-10-31 16:26
欣赏闲云老师大图自动切换，太美了！您真棒！玩得轻松自如，向您学习！

非常感谢风清老师的关注支持，下午好！

老谟深虑

闲云 发表于 2024-10-31 16:24
非常感谢老乡的关注支持，下午好！

       你把音乐隐藏了不是更好吗。

吴林海

欣赏你的【音畫素材】全屏大圖自動切換 ， 音乐好听！新画面，新视觉，漂亮！

闲云

老谟深虑 发表于 2024-10-31 16:36
你把音乐隐藏了不是更好吗。

咱们统一使用傲游浏览器，可以直接听到音乐，有使用其他浏览器的，你隐藏了，又不能自动播放，就无法听到音乐了，这样他可以手动点击播放。

闲云

吴林海 发表于 2024-10-31 16:42
欣赏你的【音畫素材】全屏大圖自動切換 ， 音乐好听！新画面，新视觉，漂亮！ ...

非常感谢吴老师的关注支持，下午好！