jquery插件SuperSlide使用说明

来源：互联网发布：2017网络与新媒体大学编辑：程序博客网时间：2024/05/22 02:29

1、引用jQuery.js 和 jquery.SuperSlide.js

因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide

?
1
2
3
4
5
<head>
    <scripttype="text/javascript"src="../jquery1.42.min.js"></script>
    <scripttype="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
<divclass="slideTxtBox">
    <divclass="hd">
        <ul><li>教育</li><li>培训</li><li>出国</li></ul>
    </div>
    <divclass="bd">
        <ul>
            <li><ahref="http://www.SuperSlide2.com"target="_blank">SuperSlide2.0正式发布！</a></li>
            ...
        </ul>
        <ul>
            <li><ahref="http://www.SuperSlide2.com"target="_blank">名师教作文：３妙招巧写高分</a></li>
            ...
        </ul>
        <ul>
            <li><ahref="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:1pxsolid #ddd;text-align:left;  }
.slideTxtBox .hd{ height:30px;line-height:30px;background:#f4f4f4;padding:020px;border-bottom:1pxsolid #ddd; position:relative; }
.slideTxtBox .hd ul{ float:left;position:absolute;left:20px;top:-1px;height:32px;   }
.slideTxtBox .hd ul li{ float:left;padding:015px;cursor:pointer;  }
.slideTxtBox .hd ul li.on{ height:30px; background:#fff;border:1pxsolid #ddd;border-bottom:2pxsolid #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
<scripttype="text/javascript">jQuery(".slideTxtBox").slide(); </script>

5、效果如下：

常用参数(切换看看)效果[effect]:自动运行[autoPlay]:触发方式[trigger]:缓动效果[easing]:效果速度[delayTime]:

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

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

0 0