图片动态切换试验（非Flash动画）

夕阳黄昏

夕阳黄昏

借用了静悟网友帖《夕阳归巢【歌词同步】》的图片， 在此表示感谢！

夕阳黄昏

[00:04.72]夕阳伴我归 [00:07.50]演唱：陈淑华 [00:16.40]LRC编辑：静悟 [00:21.06]夕阳染红了大地 [00:25.99]我正在回家的路上 [00:30.81]我赶着路路在追我 [00:35.81]修长的身影伴着我 [00:40.42]灿烂的彩霞在微笑 [00:45.24]温暖我寂寞的心窝 [00:50.11]只见那背后的景物 [00:55.12]依依次向我道再见 [00:59.76]当夕阳斜下的时候 [01:04.22]留下了一片片红霞 [01:09.27]让眼波交织的光芒 [01:13.97]伴我脚步声回到可爱的家 [01:22.45]*************** [01:40.85]夕阳染红了大地 [01:45.74]我正在回家的路上 [01:50.64]我赶着路路在追我 [01:55.91]修长的身影伴着我 [02:00.11]灿烂的彩霞在微笑 [02:05.03]温暖我寂寞的心窝 [02:09.89]只见那背后的景物 [02:14.97]依依次向我道再见 [02:19.69]当夕阳斜下的时候 [02:24.04]留下了一片片红霞 [02:29.45]让眼波交织的光芒 [02:33.85]伴我脚步声回到可爱的家 [02:42.54]

夕阳黄昏

静悟

欣赏学习老师的图片切换代码！太棒了！收藏！

静悟

夕阳黄昏 发表于 2020-11-13 11:22
本帖最后由 夕阳黄昏 于 2020-11-13 11:18 编辑

回老师，这种上下图片切换的代码只有图片地址吗？

夕阳黄昏

静悟 发表于 2020-11-13 11:37
回老师，这种上下图片切换的代码只有图片地址吗？

我把相关的代码分散在三个帖子里了，每个帖子都没有完整的代码。

静悟

夕阳黄昏 发表于 2020-11-13 11:22
借用了静悟网友帖《夕阳归巢【歌词同步】》的图片， 在此表示感谢！

只要老师用得着，静悟开心还来不及呢！要感谢老师又给我们带来了新的图片代码。辛苦了！

夕阳黄昏

第一帖的完整代码如下：

1. <style type="text/css">
   
2. .dyn_pic0        {
   
3.         width:0px;
   
4.         height:100%;
   
5.         position:absolute;
   
6.         left:50%;top:0px;
   
7. }
   
8. .turn_pic0        {
   
9.         animation:turn_pic_v 4s 1 linear forwards;
   
10. }
    
11. @keyframes turn_pic_v {
    
12.         from {
    
13.                 width:0px;left:50%;opacity:0.6;
    
14.         }
    
15.         to        {
    
16.                 width:100%;left:0px;opacity:1;
    
17.         }
    
18. }
    
19. 
    
20. 
    
21. </style>
    
22. 
    
23. <div style="width:450px;height:300px;position:relative;background:skyblue;border:thick ridge brown;">
    
24. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170228ju2xiiz0m1yi6ue2.jpg">
    
25. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170221lgt5ry5uvb5l5r4k.jpg">
    
26. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170222w0wd2djwz7o7q8kg.jpg">
    
27. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170223vwm40piizwktpymc.jpg">
    
28. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170219seea1vlxxeielxze.jpg">
    
29. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170220x72a760mw2asn3af.jpg">
    
30. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170224zy2t30tl3gsocp2t.jpg">
    
31. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170228ju2xiiz0m1yi6ue2.jpg">
    
32. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170231l7nqq0eponye8o7b.jpg">
    
33. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170225kyribn1gc14fqclo.jpg">
    
34. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170229vzuobyzxqsst0xbw.jpg">
    
35. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170232q6yt2dkt1dwdt6x4.jpg">
    
36. <img class="dyn_pic0" src="http://www.keai99.com/data/attachment/forum/202011/11/170226k673lnaa88a88nn5.jpg">
    
37. </div>
    
38. 
    
39. 
    
40. 
    
41. <script type="text/javascript">
    
42.         function hasClass( elements,cName ){
    
43.           return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
    
44.         };
    
45.         function addClass( elements,cName ){
    
46.           if( !hasClass( elements,cName ) ){
    
47.                 elements.className += " " + cName;
    
48.           };
    
49.         };
    
50.         function removeClass( elements,cName ){
    
51.           if( hasClass( elements,cName ) ){
    
52.                 elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
    
53.           };
    
54.         };
    
55.         var curIdx = 0;
    
56.         var dyn_pics0 = document.getElementsByClassName('dyn_pic0');
    
57.         var lastIdx = dyn_pics0.length - 1;
    
58.         function turn_cur_pic0()        {
    
59.                 removeClass(dyn_pics0[lastIdx], 'turn_pic0');
    
60.                 dyn_pics0[lastIdx].parentElement.style.backgroundImage = "url(" + dyn_pics0[lastIdx].src + ")";
    
61.                 dyn_pics0[lastIdx].parentElement.style.backgroundSize = "cover";
    
62.                 addClass(dyn_pics0[curIdx], 'turn_pic0' );
    
63.                 lastIdx = curIdx;
    
64.                 curIdx++;
    
65.                 curIdx %= dyn_pics0.length;
    
66.                 setTimeout(turn_cur_pic0, 6000);
    
67.         }
    
68.        
    
69.         turn_cur_pic0();
    
70.        
    
71. </script>
    

复制代码

静悟

夕阳黄昏 发表于 2020-11-13 11:40
我把相关的代码分散在三个帖子里了，每个帖子都没有完整的代码。

哦，这样就要自己去动脑筋了。