排列五开奖号码走势图|排列五开奖公告
首頁 > 編程學習記錄 > 利用JS類MSClass.js實現輪播展示

201510月29

利用JS類MSClass.js實現輪播展示

作者:admin 1 Comment 發表評論

一直想學習輪播,但之前不懂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] 網址:http://www.popub.net***/

推薦閱讀相關文章:編程學習記錄

本文地址:http://www.c7hk.com/jslunbo.html
版權所有 © 轉載時必須以鏈接形式注明作者和原始出處!

One Response to “利用JS類MSClass.js實現輪播展示”

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

    如果需要輪播的話去用這個就足夠了:http://demo.jb51.net/js/myfocus/demo.html

發表評論

排列五开奖号码走势图