• 人民日报客户端宣传页 2019-11-15
  • 一语惊坛(6月5日):担当新使命,展现新作为。 2019-11-15
  • 俄罗斯驻华大使:未来上合的首要任务是加强区域一体化 2019-11-14
  • 今后不懂藏文也能读《格萨尔》了 2019-11-14
  • 太原网友:谁来管管逢雨必淹的山大附小周边 2019-11-13
  • 拉萨市为第五批市级非遗代表性项目传承人颁证 2019-11-12
  • 商务部新闻发言人对美白宫6月18日声明发表谈话 2019-11-12
  • “袋鼠军团”宣称有秘密武器 老将新秀谁更耀眼? 2019-11-11
  • 他们是中国军人,他们2个月排除380万平方米雷场 2019-11-07
  • 陕西守艺人丨传承自父亲的老油坊,是我人生的希望之光 2019-11-04
  • 人民日报评论:在端午品味文化的芳香 2019-11-04
  • 广东摧毁两“呼死你”团伙 恶意呼叫超过12亿次 2019-11-03
  • 400年来旷日持久的一桩公案:《西游记》作者真的是吴承恩吗? 2019-11-03
  • 紫光阁中共中央国家机关工作委员会 2019-11-03
  • “普京4.0”时代 三大执政优势应对挑战 2019-11-02
  • 首页 > 编程学习记录 > 利用JS类MSClass.js实现轮播展示

    201510月29

    利用JS类MSClass.js实现轮播展示

    作者:admin 1 Comment 发表评论

    曾道人新报跑狗 www.jmuag.tw 一直想学习轮播,但之前不懂JS,所以就一直耽搁着,而今天要仿一个网页,发现它的轮播就是引用的外部JS文件,这个JS文件专门搞轮播展示的,通过引用以后,简单几句,就可以实现图片,文字的轮播展示!

    比如我要几个DIV向上轮播展示,那么代码如下:

    <script type=”text/javascript” src=”./MSClass.js”></script>
    <div id=”move” style=”height:75px;”> ? ? ? ? <!——–要添加了这个高度标签才能正常轮播,纵向滚动就需要设置height——->
    <div id=”moveconten” >
    <div id =”a” style=”height: 25px;width:10px;”> 1 </div>
    <div id =”b” style=”height: 25px;width:10px;”> 2 </div>
    <div id =”c” style=”height: 25px;width:10px;”> 3 </div>
    <div id =”d” style=”height: 25px;width:10px;”> 4 </div>
    <div id =”e” style=”height: 25px;width:10px;”> 5</div>
    <div id =”f” style=”height: 25px;width:10px;”> 6 </div>
    <div id =”g” style=”height: 25px;width:10px;”> 7 </div>
    </div>
    </div>
    <script type=”text/javascript”>
    var m_3_4_1 = new Marquee([“move”,”moveconten”],”top”);
    m_3_4_1.Start();
    </script>

    而如果要横向轮播展示,那么代码如下:

    <script type=”text/javascript” src=”./MSClass.js”></script>
    <div id =”move” style=”width:400px; overflow:hidden”> ? ?<!——–要添加了这个宽度标签才能正常轮播,横向滚动就需要设置width——>
    <div id=”moveconten”>
    <div id =”a” style=”height: 25px;width:10px;”> 1 </div>
    <div id =”b” style=”height: 25px;width:10px;”> 2 </div>
    <div id =”c” style=”height: 25px;width:10px;”> 3 </div>
    <div id =”d” style=”height: 25px;width:10px;”> 4 </div>
    <div id =”e” style=”height: 25px;width:10px;”> 5</div>
    <div id =”f” style=”height: 25px;width:10px;”> 6 </div>
    <div id =”g” style=”height: 25px;width:10px;”> 7 </div>
    </div>
    </div>
    <script type=”text/javascript”>
    var m_3_4_1 = new Marquee([“move”,”moveconten”],”right”);
    m_3_4_1.Start();
    </script>

    这个JS文件引用说明,官网是有解释的,但我还有很多没有尝试过,不过暂时是能用了,基本能上下左右轮播也够需求了!使用说明:

    应用说明:页面包含<script type=”text/javascript” src=”MSClass.js”></script>

    创建实例:
    //参数直接赋值法
    new Marquee(“marquee”)
    new Marquee(“marquee”,”top”)
    ……
    new Marquee(“marquee”,0,1,760,52)
    new Marquee(“marquee”,”top”,1,760,52,50,5000)
    ……
    new Marquee(“marquee”,0,1,760,104,50,5000,3000,52)
    new Marquee(“marquee”,null,null,760,104,null,5000,null,-1)

    //参数动态赋值法
    var marquee1 = new Marquee(“marquee”) *此参数必选
    marquee1.Direction = “top”; 或者 marquee1.Direction = 0;
    marquee1.Step = 1;
    marquee1.Width = 760;
    marquee1.Height = 52;
    marquee1.Timer = 50;
    marquee1.DelayTime = 5000;
    marquee1.WaitTime = 3000;
    marquee1.ScrollStep = 52;
    marquee1.Start();

    参数说明:
    ID “marquee” 容器ID (必选)
    Direction (0) 滚动方向 (可选,默认为0向上滚动) 可设置的值包括:0,1,2,3,”top”,”bottom”,”left”,”right” (0向上 1向下 2向左 3向右)
    Step (1) 滚动的步长 (可选,默认值为2,数值越大,滚动越快)
    Width (760) 容器可视宽度 (可选,默认值为容器初始设置的宽度)
    Height (52) 容器可视高度 (可选,默认值为容器初始设置的高度)
    Timer (50) 定时器 (可选,默认值为30,数值越小,滚动的速度越快,1000=1秒,建议不小于20)
    DelayTime (5000) 间歇停顿延迟时间(可选,默认为0不停顿,1000=1秒)
    WaitTime (3000) 开始时的等待时间(可选,默认或0为不等待,1000=1秒)
    ScrollStep (52) 间歇滚动间距 (可选,默认为翻屏宽/高度,该数值与延迟均为0则为鼠标悬??刂?-1禁止鼠标控制)

    使用建议:
    1、建议直接赋予容器的显示区域的宽度和高度,如(<div id=”marquee” style=”width:760px;height:52px;”>……</div>)
    2、建议为容器添加样式overflow = auto,如(<div id=”marquee” style=”width:760px;height:52px;overflow:auto;”>……</div>)
    3、为了更准确的获取滚动区域的宽度和高度,请尽可能将各滚动单位直接赋予正确宽高度
    4、对于TABLE标记的横向滚动,需要对TABLE添加样式display = inline,如(<div id=”marquee” style=”width:760px;height:52px;overflow:auto;”><table style=”display:inline”>……</table></div>)
    5、对于翻屏滚动或间歇滚动,要注意各滚动单位间的间距,同时需要对容器的可视高度和可视宽度做好准确的设置,对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整
    6、对于LI自动换行的问题暂时没有更好的解决办法,建议将其转换成表格(TABLE)的形式来达到同等的效果
    7、针对横向滚动的文字段落,如果最末端是以空格” “结束的,请将空格” “转换成”&nbsp;”
    8、鼠标悬停滚动思想源自Flash,所以有一定的局限性(容器内仅允许用图片<img>或者带链接的图片<a><img></a>的形式,并需要禁止其自动换行)

    感  谢:
    天上的书生(QQ:30370740) (IE页面留白的Bug) 2007/12/22
    周珺 zhoujun#yuchengtech.com (文字滚动跳行的bug) 2007/01/31
    自本程序发布以来,收到不少朋友的邮件,提出了很多意见和建议,感谢大家的支持!

    \***程序制作/版权所有:崔永祥(333) E-Mail:[email protected] 网址://www.popub.net***/

    推荐阅读相关文章:编程学习记录

    本文地址://www.jmuag.tw/jslunbo.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    One Response to “利用JS类MSClass.js实现轮播展示”

    1. #1 xuerff 回复 | 引用 Post:2015-11-03 09:17

      如果需要轮播的话去用这个就足够了://demo.jb51.net/js/myfocus/demo.html

    发表评论

  • 人民日报客户端宣传页 2019-11-15
  • 一语惊坛(6月5日):担当新使命,展现新作为。 2019-11-15
  • 俄罗斯驻华大使:未来上合的首要任务是加强区域一体化 2019-11-14
  • 今后不懂藏文也能读《格萨尔》了 2019-11-14
  • 太原网友:谁来管管逢雨必淹的山大附小周边 2019-11-13
  • 拉萨市为第五批市级非遗代表性项目传承人颁证 2019-11-12
  • 商务部新闻发言人对美白宫6月18日声明发表谈话 2019-11-12
  • “袋鼠军团”宣称有秘密武器 老将新秀谁更耀眼? 2019-11-11
  • 他们是中国军人,他们2个月排除380万平方米雷场 2019-11-07
  • 陕西守艺人丨传承自父亲的老油坊,是我人生的希望之光 2019-11-04
  • 人民日报评论:在端午品味文化的芳香 2019-11-04
  • 广东摧毁两“呼死你”团伙 恶意呼叫超过12亿次 2019-11-03
  • 400年来旷日持久的一桩公案:《西游记》作者真的是吴承恩吗? 2019-11-03
  • 紫光阁中共中央国家机关工作委员会 2019-11-03
  • “普京4.0”时代 三大执政优势应对挑战 2019-11-02
  • 上证指上证指数行情 舟山清墩星空棋牌官网 浙江舟山飞鱼开奖号码 丰禾棋牌备用网址 广西十一选五一定牛 全国股票配资合作 金牛棋牌娱乐 四川金7乐走势图012路 北京快乐8计划 江苏11选5遗漏的号码