---

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

<script src="./jquery.min.js">script>
<script src="./jquery.SuperSlide.2.1.3.js">script>
1
2

2、编写HTML

以下是默认的HTMl结构，分别是 “.hd” 里面包含ul， “.bd” 里面包含ul

<div id="slideBox" class="slideBox">
	<div class="hd">
		<ul>
			<li class="on">1li>
			<li class="">2li>
			<li class="">3li>
		ul>
	div>
	<div class="bd">
		<ul>
			<li style="display: list-item; opacity: 1">
				<a href="javascript:void(0)"><img src="http://www.superslide2.com/demo/images/pic2.jpg" />a>
			li>
			<li style="display: none">
				<a href="javascript:void(0)"><img src="http://www.superslide2.com/demo/images/pic1.jpg" />a>
			li>
			<li style="display: none">
				<a href="javascript:void(0)"><img src="http://www.superslide2.com/demo/images/pic3.jpg" />a>
			li>
		ul>
	div>
	
	<a class="prev" href="javascript:void(0)">a>
	<a class="next" href="javascript:void(0)">a>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3、编写CSS，为HTML赋予样色

/* css 重置 */
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
body {
	background: #fff;
	font: normal 12px/22px 宋体;
}
img {
	border: 0;
}
a {
	text-decoration: none;
	color: #333;
}
/* 本例子css */
.slideBox {
	width: 450px;
	height: 230px;
	overflow: hidden;
	position: relative;
	border: 1px solid #ddd;
}
.slideBox .hd {
	height: 15px;
	overflow: hidden;
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 1;
}
.slideBox .hd ul {
	overflow: hidden;
	zoom: 1;
	float: left;
}
.slideBox .hd ul li {
	float: left;
	margin-right: 2px;
	width: 15px;
	height: 15px;
	line-height: 14px;
	text-align: center;
	background: #fff;
	cursor: pointer;
}
.slideBox .hd ul li.on {
	background: #f00;
	color: #fff;
}
.slideBox .bd {
	position: relative;
	height: 100%;
	z-index: 0;
}
.slideBox .bd li {
	zoom: 1;
	vertical-align: middle;
}
.slideBox .bd img {
	width: 450px;
	height: 230px;
	display: block;
}
/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev,
.slideBox .next {
	position: absolute;
	left: 3%;
	top: 50%;
	margin-top: -25px;
	display: block;
	width: 32px;
	height: 40px;
	background: url(http://www.superslide2.com/demo/images/slider-arrow.png) -110px 5px no-repeat;
	filter: alpha(opacity=50);
	opacity: 0.5;
}
.slideBox .next {
	left: auto;
	right: 3%;
	background-position: 8px 5px;
}
.slideBox .prev:hover,
.slideBox .next:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}
.slideBox .prevStop {
	display: none;
}
.slideBox .nextStop {
	display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

4、调用SuperSlide

因为是默认HTML结构，所以参数都为默认值，不用填写titCell、mainCell等。

<script>
	jQuery(".slideBox").slide({
		// 切换元素的包裹层对象
		mainCell: ".bd ul",
		// 动画效果
		effect: "fade",
		// 自动运行
		autoPlay: true,
		// 	titCell触发方式 || mouseover：鼠标移过触发；|| click：鼠标点击触发；
		trigger: "click",
		// 缓动效果；[v2.1]更改默认效果为“swing”，使效果更流畅
		easing: "swing",
		// 毫秒；切换效果持续时间（一次切换效果执行所用的时间长度）。
		delayTime: 500,
		// 鼠标移到容器层（无缝滚动是mainCell）是否停止播放
		mouseOverStop: true,
		// 前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效，同时增加prevStop/nextStop类名控制样色
		pnLoop: true
	});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！