官網(wǎng)：http://www.superslide2.com/index.html
GitHub：https://github.com/nicinabox/superslides
引用jQuery.js 和 jquery.SuperSlide.js
因為
SuperSlide是基于jQuery的插件，所以前提必須先引用jQuery，再引用SuperSlide
<head>
<script type="text/javascript" src="../jquery1.42.min.js"></script>
<script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>
</head>
編寫HTML
以下是默認(rèn)的
HTMl結(jié)構(gòu)，分別是".hd"里面包含ul，".bd"里面包含ul
<div class="slideTxtBox">
<div class="hd">
<ul>
<li>教育</li>
<li>培訓(xùn)</li>
<li>出國</li>
</ul>
</div>
<div class="bd">
<ul>
<li>
<a target="_blank">SuperSlide2.0正式發(fā)布！</a>
</li>
...
</ul>
<ul>
<li>
<a target="_blank">名師教作文：３妙招巧寫高分</a>
</li>
...
</ul>
<ul>
<li>
<a target="_blank">澳大利亞八大名校招生說明會</a>
</li>
...
</ul>
</div>
</div>
編寫CSS，為HTML賦予樣色
認(rèn)真檢查您的
css，保證兼容大部分瀏覽器前提下再調(diào)用SuperSlide
.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;
}
調(diào)用SuperSlide
在本例中，請在
“.slideTxtBox”div結(jié)束后立刻調(diào)用SuperSlide，這樣會得到最好的效果，避免整個頁面加載后再調(diào)用SuperSlide；
因為是默認(rèn)HTML結(jié)構(gòu)，所以參數(shù)都為默認(rèn)值，不用填寫titCell、mainCell等。
<script type="text/javascript">
jQuery(".slideTxtBox").slide();
</script>
使用參數(shù)
- 全部參數(shù)對應(yīng)表:：http://www.superslide2.com/param.html
