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

夕阳黄昏

夕阳黄昏

切换方式从0 到 10 共有11种可选择
中间垂直展开                0
中间水平展开                1
中心展开                        2        
水平由上向下展开        3        
水平由下向上展开        4        
垂直从左向右展开        5        
垂直从右向左展开        6        
从左上角展开                7        
从右上角展开                8        
从左下角展开                9        
从右下角展开                10   
楼上代码使用的第5种方式：从左向右展开

1. <style type="text/css">
   
2. 
   
3. @import "http://cesholl.cn3v.net/style/dynPictureChg.css"
   
4. 
   
5. </style>
   
6. 
   
7. <script type="text/javascript" >
   
8. !window.addClass && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/class_oper.js" charset="utf-8"><\/script>');
   
9. !window.dynPicInit && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/dynPictureChg.js" charset="utf-8"><\/script>');
   
10. </script>
    
11. 
    
12. <div id="图片框" style="width:900px;height:600px;position:relative;background:skyblue;border:thick ridge brown;">
    
13. </div>
    
14. <script type="text/javascript">
    
15.         var        picArr = [
    
16.         "http://www.keai99.com/data/attachment/forum/202011/11/170228ju2xiiz0m1yi6ue2.jpg",
    
17.         "http://www.keai99.com/data/attachment/forum/202011/11/170221lgt5ry5uvb5l5r4k.jpg",
    
18.         "http://www.keai99.com/data/attachment/forum/202011/11/170222w0wd2djwz7o7q8kg.jpg",
    
19.         "http://www.keai99.com/data/attachment/forum/202011/11/170223vwm40piizwktpymc.jpg",
    
20.         "http://www.keai99.com/data/attachment/forum/202011/11/170219seea1vlxxeielxze.jpg",
    
21.         "http://www.keai99.com/data/attachment/forum/202011/11/170220x72a760mw2asn3af.jpg",
    
22.         "http://www.keai99.com/data/attachment/forum/202011/11/170224zy2t30tl3gsocp2t.jpg",
    
23.         "http://www.keai99.com/data/attachment/forum/202011/11/170228ju2xiiz0m1yi6ue2.jpg",
    
24.         "http://www.keai99.com/data/attachment/forum/202011/11/170231l7nqq0eponye8o7b.jpg",
    
25.         "http://www.keai99.com/data/attachment/forum/202011/11/170225kyribn1gc14fqclo.jpg",
    
26.         "http://www.keai99.com/data/attachment/forum/202011/11/170229vzuobyzxqsst0xbw.jpg",
    
27.         "http://www.keai99.com/data/attachment/forum/202011/11/170232q6yt2dkt1dwdt6x4.jpg",
    
28.         "http://www.keai99.com/data/attachment/forum/202011/11/170226k673lnaa88a88nn5.jpg"];
    
29.         var opts = {
    
30.                 picFrameID:'图片框',
    
31.                 picturesData:picArr,
    
32.                 chgType:5
    
33.         };
    
34.         
    
35.         dynPicInit(opts);
    
36. </script>

复制代码

九品莲花

夕阳黄昏 发表于 2020-11-16 12:48
切换方式从0 到 10 共有11种可选择
中间垂直展开                0
中间水平展开                1

夕阳黄昏仁兄中午好！
好代码！感谢您不吝赐教！

夕阳黄昏

九品莲花 发表于 2020-11-16 13:02
夕阳黄昏仁兄中午好！
好代码！感谢您不吝赐教！

谢谢您的鼓励！

九品莲花

夕阳黄昏 发表于 2020-11-16 12:48
切换方式从0 到 10 共有11种可选择
中间垂直展开                0
中间水平展开                1

十一种切换方式如下：



切换方式从0 到 10 共有11种可选择
0、中间垂直展开              
1、中间水平展开               
2、中心展开                           
3、水平由上向下展开            
4、水平由下向上展开               
5、垂直从左向右展开               
6、垂直从右向左展开               
7、从左上角展开                       
8、从右上角展开                       
9、从左下角展开                       
10、从右下角展开                  


chgType:5
调整红色数字，变换切换方式。

沧海笑

老师辛苦了！

夕阳黄昏

九品莲花 发表于 2020-11-16 15:02 十一种切换方式如下：

您这样列出要更清楚些， 我偷懒了从源文件里拷贝出注释改的。

0. 中间垂直展开
1. 中间水平展开
2. 中心展开
3. 水平由上向下展开
4. 水平由下向上展开
5. 垂直从左向右展开
6. 垂直从右向左展开
7. 从左上角展开
8. 从右上角展开
9. 从左下角展开
10. 从右下角展开

夕阳黄昏

沧海笑 发表于 2020-11-16 15:07
老师辛苦了！

九品莲花

夕阳黄昏 发表于 2020-11-16 15:12
您这样列出要更清楚些， 我偷懒了从源文件里拷贝出注释改的。

谢谢仁兄、老师！
学生拜见老师！

许森匡.

谢谢代码分享！下午好！