官网：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
以下是默认的
HTMl结构，分别是".hd"里面包含ul，".bd"里面包含ul
<div class="slideTxtBox">
<div class="hd">
<ul>
<li>教育</li>
<li>培训</li>
<li>出国</li>
</ul>
</div>
<div class="bd">
<ul>
<li>
<a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a>
</li>
...
</ul>
<ul>
<li>
<a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a>
</li>
...
</ul>
<ul>
<li>
<a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a>
</li>
...
</ul>
</div>
</div>
编写CSS，为HTML赋予样色
认真检查您的
css，保证兼容大部分浏览器前提下再调用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;
}
调用SuperSlide
在本例中，请在
“.slideTxtBox”div结束后立刻调用SuperSlide，这样会得到最好的效果，避免整个页面加载后再调用SuperSlide；
因为是默认HTML结构，所以参数都为默认值，不用填写titCell、mainCell等。
<script type="text/javascript">
jQuery(".slideTxtBox").slide();
</script>
网友评论