1、引用jQuery.js 和 jquery.SuperSlide.js
因爲SuperSlide是基於jQuery的插件，所以前提必須先引用jQuery，再引用SuperSlide
|
1
2
3
4
5
|
<head> <script
type="text/javascript"
src="../jquery1.42.min.js"></script> <script
type="text/javascript"
src="../jquery.SuperSlide.2.1.1.js"></script></head> |
2、編寫HTML
以下是默認的HTMl結構，分別是 ".hd" 裏面包含ul， ".bd" 裏面包含ul
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<div
class="slideTxtBox"> <div
class="hd"> <ul><li>教育</li><li>培訓</li><li>出國</li></ul> </div> <div
class="bd"> <ul> ... </ul> <ul> ... </ul> <ul> ... </ul> </div></div> |
3、編寫CSS，爲HTML賦予樣色
認真檢查您的css，保證兼容大部分瀏覽器前提下再調用SuperSlide
|
1
2
3
4
5
6
7
8
|
.slideTxtBox{
width:450px;
border:1px
solid
#ddd;
text-align:left;
}.slideTxtBox
.hd{ height:30px;
line-height:30px;
background:#f4f4f4;
padding:0
20px;
border-bottom:1px
solid
#ddd;
position:relative;
}.slideTxtBox
.hd ul{ float:left;
position:absolute;
left:20px;
top:-1px;
height:32px;
}.slideTxtBox
.hd ul li{ float:left;
padding:0
15px;
cursor:pointer;
}.slideTxtBox
.hd ul li.on{ height:30px;
background:#fff;
border:1px
solid
#ddd;
border-bottom:2px
solid
#fff;
}.slideTxtBox
.bd ul{ padding:15px;
zoom:1;
}.slideTxtBox
.bd li{ height:24px;
line-height:24px;
}.slideTxtBox
.bd li .date{ float:right;
color:#999;
} |
4、調用SuperSlide
在本例中，請在 “.slideTxtBox” div結束後立刻調用 SuperSlide，這樣會得到最好的效果，避免整個頁面加載後再調用 SuperSlide；
因爲是默認HTML結構，所以參數都爲默認值，不用填寫titCell、mainCell等。
|
1
|
<script
type="text/javascript">jQuery(".slideTxtBox").slide();
</script> |