设为首页收藏本站

博客中国

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 1521|回复: 0
收起左侧

DIV + CSS、Slide幻灯片(切入效果 + 页码)实例(缓动) JavaScript - MSClass应用实例演示

[复制链接]
发表于 2016-8-18 14:29:47 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?免费注册

x

1.jpg

  1. <script src="template/zhikai_n5chengshiv9/images/js/MSClass.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3. function $(id){return document.getElementById(id)};
  4. </script>

  5. <h1>DIV + CSS、Slide幻灯片(切入效果 + 页码)实例(缓动) JavaScript - MSClass应用实例演示 <a href="MSClass.html">下载MSClass</a></h1>
  6. <br/><br/>
  7. <style>
  8. a,body,select,td,b{font-size:12px;text-decoration:none;}
  9. body{background:#ffffff;}
  10. a,pre{color:#808080;}
  11. a:link,a:visited {color:#555;}
  12. a:hover,a:active { color:#ff4e00;}
  13. img{border:0}
  14. </style>
  15. <style type="text/css">
  16. #TabID{ position:absolute; bottom:20px; left:20px;}
  17. #TabID li{list-style:none;float:left;width:16px;height:16px;FILTER:alpha(opacity=80);opacity:0.8;border:1px solid #000000;background-color:#ECF4EC;color:#000000;list-style:none;text-align:center;cursor:pointer;padding:2px 5px 0 5px;margin:0 2px}
  18. #TabID li:hover,#TabID li.active{border:1px solid #000000;background-color:#000000;color:#FFFFFF;}
  19. </style>
  20. <div id="wapper" style="overflow:hidden;width:620px;height:255px;position:relative;clear:both;border:1px solid #000000;background-color:#ffffff;">
  21.         <div style="height:30px;background:#CC0000;margin-bottom:10px;border-bottom:2px solid #990000;position:relative"><div style="background:#fff;width:120px;font-size:12px;position:absolute;bottom:-2px;left:20px;padding:5px">Slide幻灯片实例</div></div>
  22.         <div id="MSClassBox" style="margin:0 auto;">
  23.                 <ul id="ContentID">
  24.                         <li><a href="javascript:void(0)"><img border="0" src="images/slide_1.jpg" width="610" height="205"/></a></li>
  25.                         <li><a href="javascript:void(0)"><img border="0" src="images/slide_2.jpg" width="610" height="205"/></a></li>
  26.                         <li><a href="javascript:void(0)"><img border="0" src="images/slide_3.jpg" width="610" height="205"/></a></li>
  27.                         <li><a href="javascript:void(0)"><img border="0" src="images/slide_4.jpg" width="610" height="205"/></a></li>
  28.                         <li><a href="javascript:void(0)"><img border="0" src="images/slide_5.jpg" width="610" height="205"/></a></li>
  29.                 </ul>
  30.         </div>
  31.         <ul id="TabID">
  32.                 <li class="">1</li>
  33.                 <li class="">2</li>
  34.                 <li class="">3</li>
  35.                 <li class="">4</li>
  36.                 <li class="">5</li>
  37.         </ul>
  38. </div>
  39. <script type="text/javascript">
  40. /*调用方式1*/
  41. //new Marquee(["MSClassBox","ContentID","TabID"],2,0.2,610,205,20,2000,0,610,0)

  42. /*调用方式2*\
  43. var a=new Marquee(["MSClassBox","ContentID","TabID"])
  44. a.Direction = 0;
  45. a.Step = 0.1;
  46. a.Width=610;
  47. a.Height=205;
  48. a.Timer=20;
  49. a.DelayTime=3000;
  50. a.WaitTime=0;
  51. a.ScrollStep=205;
  52. a.SwitchType=2;
  53. a.Start();
  54. \*---END---*/


  55. /*调用方式3*\
  56. new Marquee(
  57. {
  58.         MSClass          : {MSClassID : "MSClassBox" , ContentID : "ContentID" , TabID : "TabID"},
  59.         Direction : 0,
  60.         Step          : 0.1,
  61.         Width          : 610,
  62.         Height          : 205,
  63.         Timer          : 20,
  64.         DelayTime : 3000,
  65.         WaitTime  : 0,
  66.         ScrollStep: 205,
  67.         SwitchType: 2,
  68.         AutoStart : 1
  69. })
  70. \*---END---*/


  71. //*调用方式4*\
  72. new Marquee(
  73. {
  74.         MSClassID : "MSClassBox",
  75.         ContentID : "ContentID",
  76.         TabID          : "TabID",
  77.         Direction : 2,
  78.         Step          : 0.3,
  79.         Width          : 610,
  80.         Height          : 205,
  81.         Timer          : 20,
  82.         DelayTime : 2000,
  83.         WaitTime  : 0,
  84.         ScrollStep: 610,
  85.         SwitchType: 1,
  86.         AutoStart : 1
  87. })
  88. //\*---END---*/
  89. </script>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

联系我们|Archiver|手机版|小黑屋|博客中国   

GMT+8, 2018-10-16 12:13

Powered by bokecn.com

© 2001-2018 bokecn.com

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