无缝链接滚动大图-民族文化园风景

娟子

春归来 发表于 2024-10-23 20:31
山青水秀，歌唱，制作精美。

谢谢春归来老师关注、精彩点评热情支持鼓励！祝您身体健康金秋快乐，远握问好！

娟子

镁光灯 发表于 2024-10-24 09:32
滚动大图，曲美景雅，制作大气。为娟子老师点赞！

谢谢镁光灯老师关注、精彩点评热情支持鼓励！祝您身体健康金秋快乐，远握问好！

娟子

起个网名好难 发表于 2024-10-24 12:35
1. 在这个论坛不需要绝对定位，设为position:relative; 即可2. 相应的这一条  也可以取消， 在这里不需要 ...

见到老师非常高兴！谢谢您的耐心指导！我先试试，希望能成功。
谢谢老师关注、精彩点评热情支持鼓励！祝您身体健康金秋快乐，远握问好！

大山之子

欣赏老师的无缝拼接大图！很好看！

娟子

大山之子 发表于 2024-10-24 16:01
欣赏老师的无缝拼接大图！很好看！

谢谢大山老师关注、精彩点评热情支持鼓励！祝您身体健康金秋快乐，远握问好！

大坪人

欣赏老师佳作，问好！

娟子

大坪人 发表于 2024-10-24 20:27
欣赏老师佳作，问好！

谢谢大坪人老师关注、精彩点评热情支持鼓励！祝您身体健康金秋快乐，远握问好！

沉醉醉

娟子老师，很喜欢您的无缝链接滚动大图，有没有代码可以分享？
请发来学习一下，十分感谢。

娟子

沉醉醉 发表于 2024-10-25 21:25
娟子老师，很喜欢您的无缝链接滚动大图，有没有代码可以分享？
请发来学习一下，十分感谢。

醉醉老师早上好！这是代码，您一看就明白。选择您喜欢的美图，配上符合主题内容的歌曲就成了。

1. 
   
2. 
   
3. </i><br /><br /><style>
   
4.         :root        {--w:1416px;--h:650px;}
   
5.   #oBlk {
   
6.     margin-left: 50% ; left:calc(-0.5 * var(--w));
   
7.     margin-top:-20px;
   
8.     width: var(--w);
   
9.     height: var(--h);
   
10.     box-shadow: 3px 3px 10px #000;
    
11.     overflow: hidden;
    
12.     position: absolute;
    
13.   }
    
14. 
    
15.   #oBlk::before,
    
16.   #oBlk::after {
    
17.     position: absolute;
    
18.     content: '';
    
19.     left: var(--curX0);
    
20.     top: 0px;
    
21.     width: 100%;
    
22.     height: 100%;
    
23.     background: url('图片地址') no-repeat center / cover;
    
24. 
    
25.   }
    
26.                            
    
27.   #oBlk::after {                     
    
28.     left: var(--curX1);
    
29.     transform: scaleX(-1);
    
30.   }
    
31.   #comp {height:calc(var(--h) + 100px);}
    
32. </style>
    
33. <div id="oBlk"></div>
    
34. <div id="comp"></div>
    
35. <script>
    
36. {
    
37. eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('5 4=6.g;5 7=1.0,8=0,2=0,3=4,b;5 9=()=>{2-=7;3-=7;a(2<=-4)2=4;a(3<=-4)3=4;8=3+(2>=0?1:-1);6.c.d(\'--2\',2+\'e\');6.c.d(\'--3\',8+\'e\');b=f(9)};9();',17,17,'||curX0|curX1|blkWidth|let|oBlk|step|tune|moving|if|raf|style|setProperty|px|requestAnimationFrame|offsetWidth'.split('|'),0,{}))
    
38. }  
    
39. </script>
    
40. 
    
41. </div><br><br><br><br>
    
42. <audio src="歌曲地址"loop autoplay>   
    
43. </td></tr>
    

复制代码

沉醉醉

娟子 发表于 2024-10-26 07:06
醉醉老师早上好！这是代码，您一看就明白。选择您喜欢的美图，配上符合主题内容的歌曲就成了。

谢谢娟子老师，我对代码不太懂，但是我想有空试试，如果不行还请您多指教。