首页 > 编程学习记录 > 利用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-06-20
  • [大笑]别一边骂着高房价,一边又跟着炒,那就是典型的既想……又想……了! 2019-06-20
  • [微笑]正是因为土地是属于全民的,你个人要使用就必须付钱,不然就占了大家的便宜。 2019-06-19
  • 证监会:打击市场“黑嘴” 打好专项执法攻坚战 2019-06-19
  • 任性海雕同滑翔机模型天空竞速 上演“比翼双飞” 2019-06-19
  • 北京市将迎两位新区长 三人拟任区委副书记 2019-06-19
  • 第十一届北京文博会海淀展区亮相 2019-06-18
  • 《紫砂的意蕴——宜兴紫砂工艺研究》简介 2019-06-18
  • 重庆市垫江县“鹅司令”闯出鹅产业化新路 2019-06-18
  • “有个景区叫宁夏”2018景区推介及产品政策在太原发布 2019-06-18
  • 山东省将举办“第十二届全国美展山东作品展” 2019-06-17
  • 山东五十万大学生浸润传统文化课堂 2019-06-17
  • “读”懂父亲:在分离的那一瞬间! 2019-06-17
  • 沿汾河 一览众桥雄姿 2019-06-17
  • 设计众议院:新时代消费观念造就的全新第八代凯美瑞 2019-06-16
  • 166| 779| 572| 583| 13| 493| 80| 954| 951| 969|