可爱老人网

 找回密码
 注册会员
搜索
查看: 1151|回复: 29

图片动态切换试验(非Flash动画) 续

[复制链接]
发表于 2020-11-16 12:48 | 显示全部楼层 |阅读模式
本帖最后由 夕阳黄昏 于 2020-11-16 12:48 编辑

评分

参与人数 6人气值 +19 收起 理由
娟子 + 2 赞一个!
湛蓝 + 3 赞一个!
真真 + 5 赞一个!
沉醉醉 + 3 赞一个!
静悟 + 3 赞一个!

查看全部评分

 楼主| 发表于 2020-11-16 12:48 | 显示全部楼层
本帖最后由 夕阳黄昏 于 2020-11-16 12:47 编辑

切换方式从0 到 10 共有11种可选择
中间垂直展开                0
中间水平展开                1
中心展开                        2        
水平由上向下展开        3        
水平由下向上展开        4        
垂直从左向右展开        5        
垂直从右向左展开        6        
从左上角展开                7        
从右上角展开                8        
从左下角展开                9        
从右下角展开                10   
楼上代码使用的第5种方式:从左向右展开
  1. <style type="text/css">

  2. @import "http://cesholl.cn3v.net/style/dynPictureChg.css"

  3. </style>

  4. <script type="text/javascript" >
  5. !window.addClass && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/class_oper.js" charset="utf-8"><\/script>');
  6. !window.dynPicInit && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/dynPictureChg.js" charset="utf-8"><\/script>');
  7. </script>

  8. <div id="图片框" style="width:900px;height:600px;position:relative;background:skyblue;border:thick ridge brown;">
  9. </div>
  10. <script type="text/javascript">
  11.         var        picArr = [
  12.         "http://www.keai99.com/data/attachment/forum/202011/11/170228ju2xiiz0m1yi6ue2.jpg",
  13.         "http://www.keai99.com/data/attachment/forum/202011/11/170221lgt5ry5uvb5l5r4k.jpg",
  14.         "http://www.keai99.com/data/attachment/forum/202011/11/170222w0wd2djwz7o7q8kg.jpg",
  15.         "http://www.keai99.com/data/attachment/forum/202011/11/170223vwm40piizwktpymc.jpg",
  16.         "http://www.keai99.com/data/attachment/forum/202011/11/170219seea1vlxxeielxze.jpg",
  17.         "http://www.keai99.com/data/attachment/forum/202011/11/170220x72a760mw2asn3af.jpg",
  18.         "http://www.keai99.com/data/attachment/forum/202011/11/170224zy2t30tl3gsocp2t.jpg",
  19.         "http://www.keai99.com/data/attachment/forum/202011/11/170228ju2xiiz0m1yi6ue2.jpg",
  20.         "http://www.keai99.com/data/attachment/forum/202011/11/170231l7nqq0eponye8o7b.jpg",
  21.         "http://www.keai99.com/data/attachment/forum/202011/11/170225kyribn1gc14fqclo.jpg",
  22.         "http://www.keai99.com/data/attachment/forum/202011/11/170229vzuobyzxqsst0xbw.jpg",
  23.         "http://www.keai99.com/data/attachment/forum/202011/11/170232q6yt2dkt1dwdt6x4.jpg",
  24.         "http://www.keai99.com/data/attachment/forum/202011/11/170226k673lnaa88a88nn5.jpg"];
  25.         var opts = {
  26.                 picFrameID:'图片框',
  27.                 picturesData:picArr,
  28.                 chgType:5
  29.         };
  30.         
  31.         dynPicInit(opts);
  32. </script>
复制代码

评分

参与人数 2人气值 +8 收起 理由
静悟 + 3 受益匪浅!
九品莲花 + 5 谢谢您的代码

查看全部评分

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

夕阳黄昏仁兄中午好!
好代码!感谢您不吝赐教!
 楼主| 发表于 2020-11-16 14:35 | 显示全部楼层
九品莲花 发表于 2020-11-16 13:02
夕阳黄昏仁兄中午好!
好代码!感谢您不吝赐教!

谢谢您的鼓励!
发表于 2020-11-16 15: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:07 | 显示全部楼层
老师辛苦了!
 楼主| 发表于 2020-11-16 15:12 | 显示全部楼层
本帖最后由 夕阳黄昏 于 2020-11-16 15:37 编辑

九品莲花 发表于 2020-11-16 15:02 十一种切换方式如下:
您这样列出要更清楚些, 我偷懒了从源文件里拷贝出注释改的。
  1. 中间垂直展开
  2. 中间水平展开
  3. 中心展开
  4. 水平由上向下展开
  5. 水平由下向上展开
  6. 垂直从左向右展开
  7. 垂直从右向左展开
  8. 从左上角展开
  9. 从右上角展开
  10. 从左下角展开
  11. 从右下角展开
 楼主| 发表于 2020-11-16 15:13 | 显示全部楼层
发表于 2020-11-16 15:19 | 显示全部楼层
夕阳黄昏 发表于 2020-11-16 15:12
您这样列出要更清楚些, 我偷懒了从源文件里拷贝出注释改的。

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

发表于 2020-11-16 15:36 | 显示全部楼层
谢谢代码分享!下午好!
        
下一页 发布主题 快速回复

手机版|公众号|小黑屋|可爱老人网 ( 闽ICP备11009337号 )

GMT+8, 2020-11-30 09:36

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表