jquery插件SuperSlide使用说明

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 >              < 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 >

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 >

5、效果如下：

scrolling="no" src="http://www.superslide2.com/demo/iframe/1.0-switchTab-iframe.html?" frameborder="0" style="width: 452px; height: 232px; vertical-align: middle; background-image: url(http://www.superslide2.com/images/loading.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat; ">

常用参数(切换看看)
效果[effect]:	fade   fold   left   top   leftLoop   topLoop	自动运行[autoPlay]:	false   true
触发方式[trigger]:	mouseover   click	缓动效果[easing]:	linear   swing   easeOutCirc   easeInQuint   easeInBack   easeOutBounce   easeOutElastic   更多
效果速度[delayTime]:	500   700   1000   0

当前调用代码：jQuery(".slideTxtBox").slide({});

注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。