设为首页收藏本站

博客中国

 找回密码
 免费注册

QQ登录

只需一步,快速开始

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

DIV + CSS(UL + LI)图片轮换滑动门应用实例(缓动) JavaScript - MSClass应用实例演示

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

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

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

x
1.jpg
  1. <script src="template/zhikai_n5chengshiv9/images/js/MSClass.js" type="text/javascript"></script>
  2. <style>
  3. a,body,select,td,b{font-size:12px;text-decoration:none;}
  4. body{background:#ffffff;}
  5. a,pre{color:#808080;}
  6. a:link,a:visited {color:#555;}
  7. a:hover,a:active { color:#ff4e00;}
  8. img{border:0}
  9. </style>
  10. <style type="text/css">
  11. .focusPic{width:730px; height:260px; margin:0 auto; clear:both; text-align:center; padding:10px 10px;background-color:#ffffff;border:1px solid #000000;}
  12. .focusPic ul{margin:0;padding:0;border:0}
  13. .focusPic .focusTitle{width:310px; float:right; font-size:14px; text-align:left;}
  14. .focusPic .focusTitle li{height:28px; line-height:28px; background:url(images/focusTitleBg.gif) left 0 no-repeat; cursor:pointer; font-size:14px; padding-left:20px; margin:0 auto 0 10px;overflow:hidden;}
  15. .focusPic #focusMenu li.active{background-position:0 -29px; font-weight:bold;}
  16. .focusPic #focusLeft{width:420px; height:240px; overflow:hidden; float:left;}
  17. </style>
  18. <div class="focusPic">
  19.         <div id="focusLeft">
  20.                 <ul id="focuscontent">
  21.                 <li><a href="javascript:void(0)"><img src="images/500X375_1.jpg" width="420" height="240" /></a></li>
  22.                 <li><a href="javascript:void(0)"><img src="images/500X375_2.jpg" width="420" height="240" /></a></li>
  23.                 <li><a href="javascript:void(0)"><img src="images/500X375_3.jpg" width="420" height="240" /></a></li>
  24.                 <li><a href="javascript:void(0)"><img src="images/500X375_4.jpg" width="420" height="240" /></a></li>
  25.                 <li><a href="javascript:void(0)"><img src="images/500X375_5.jpg" width="420" height="240" /></a></li>
  26.                 <li><a href="javascript:void(0)"><img src="images/500X375_6.jpg" width="420" height="240" /></a></li>
  27.                 <li><a href="javascript:void(0)"><img src="images/500X375_7.jpg" width="420" height="240" /></a></li>
  28.                 <li><a href="javascript:void(0)"><img src="images/500X375_8.jpg" width="420" height="240" /></a></li>
  29.                 </ul>
  30.         </div>
  31.         <div class="focusTitle">
  32.                 <b>  MSClass (通用不间断滚动JS封装类)支持说明</b>
  33.                 <ul id="focusMenu">
  34.                 <li><a href="javascript:void(0)">DIV + CSS支持(UL+LI、DL+DT+DD)</a></li>
  35.                 <li><a href="javascript:void(0)">Slide幻灯片、Lantern切入、FadeIn效果支持</a></li>
  36.                 <li><a href="javascript:void(0)">缓动 跳过等待 拖动 默认停止 交替滚动功能</a></li>
  37.                 <li><a href="javascript:void(0)">鼠标悬停滚动 加速滚动 禁止鼠标控制</a></li>
  38.                 <li><a href="javascript:void(0)">连续滚动 间歇滚动 翻屏滚动 开始等待时间</a></li>
  39.                 <li><a href="javascript:void(0)">方向支持(上,下,左,右,上下交替,左右交替)</a></li>
  40.                 <li><a href="javascript:void(0)">内容支持(纯文字、纯图片、图文混排及其它)</a></li>
  41.                 <li><a href="javascript:void(0)">浏览器兼容 (IE,FF,Opera,NS,MYIE,CHROME)</a></li>
  42.                 </ul>
  43.         </div>
  44. </div>
  45. <script type="text/javascript">
  46. new Marquee(
  47. {
  48.         MSClassID : "focusLeft",
  49.         ContentID : "focuscontent",
  50.         TabID          : "focusMenu",
  51.         Direction : 0,
  52.         Step          : 0.3,
  53.         Width          : 420,
  54.         Height          : 240,
  55.         Timer          : 20,
  56.         DelayTime : 3000,
  57.         WaitTime  : 0,
  58.         ScrollStep: 240,
  59.         SwitchType: 0,
  60.         AutoStart : 1
  61. })
  62. </script>
复制代码


回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-12-15 10:10

Powered by bokecn.com

© 2001-2019 bokecn.com

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