首页 > 编程学习记录 > 利用JS类MSClass.js实现轮播展示

201510月29

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

作者:admin 1 Comment 发表评论

山东时时彩十一选五 www.zqojk.com.cn 一直想学习轮播,但之前不懂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.zqojk.com.cn/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-04-21
  • 江苏要求在中小学普及编程教育 为人工智能发展培养人才 2019-04-21
  • 马克思主义,不会改变人类历史发展的进程和规律,它只是揭示了这个不可更改的客观规律。人类社会发展的进程,只决定于工人阶级的觉悟。现在是工人阶级丧失了革命觉悟的时期 2019-04-21
  • 莆田市:构建1536多元化解体系 实现线上线下全域覆盖 2019-04-21
  • 80亩山林被“剃光头” 森林公安半年未结案 2019-04-20
  • 夏季肠道容易“中风” 2019-04-20
  • 火爆!可兰白克两引冲突掀翻对手 杜锋直接换他下场 2019-04-20
  • 习近平日内瓦演讲一周年世界为何青睐"人类命运共同体" 2019-04-20
  • 承载历史使命的 “乡村振兴”,城乡共同参与 2019-04-19
  • 嘱望上合 青岛之约 2019-04-19
  • [微笑]那就是管理问题了,跟免不免费本身不相干! 2019-04-19
  • 六一记忆:不同的年代 同样的快乐 2019-04-18
  • 中青报:“三天朋友圈可见”的背后 2019-04-18
  • 你反来复去说1+1=2,真痴呆了?你应该讲点其他的吧,譬如,1+1=2,是客观事实还是规律,是真理还是谬误。 2019-04-18
  • 新时代 新气象 新作为 学习宣传贯彻党的十九大精神 2019-04-17
  • 233| 295| 607| 360| 860| 627| 369| 786| 186| 219|