已经封装好了，主要修改文档加载中传入的类名即可。方便大家使用，以后经常封装一些好的插件给大家用，可以定制一些东西的那种（比如，速度，样式，等等）。
以下第一个是自己封装了，第二个是在csdn一个论坛友的基础上修改封装了。原文（也是我发布的）http://bbs.csdn.net/topics/390414000?page=1#post-394110448
1、图片滚动
2、幻灯片
以下第一个是自己封装了，第二个是在csdn一个论坛友的基础上修改封装了。原文（也是我发布的）http://bbs.csdn.net/topics/390414000?page=1#post-394110448
1、图片滚动
|
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
></
title
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
Xhun(".a"); //----------------------只需要修改 ”.a" (就是最大的div的class值这里就行---------------------
});
function Xhun(_box) {
var box_frame = _box + " div ul";
var box_div = _box + " div";
$(_box).find("ul").wrap("<
div
></
div
>"); //添加一个div，来控制偏移量
$(box_div).append($(box_frame).clone()); //克隆一个ul并添加到div中，为了实现无缝循环
$(box_div).append($(box_frame).clone()); //克隆一个ul并添加到div中，为了实现无缝循环
var li_size = $(_box).find("li").size(); //获取li的个数
var li_width = $(box_frame).children("li").width(); //获取li的宽度
var box_div_width = $(box_div).width(li_size * li_width * 5); //设置div的宽度
$(box_frame).css("float", "left");
var dd = setInterval(gd, 30);
function gd() {
var position = $(_box).scrollLeft(); //scrollLeft()是获取对象的水平偏移量
$(_box).scrollLeft(position + 1);
if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); } //判断位移是否大于ul的总长度
}
$(_box).mouseleave(function () {
dd = setInterval(gd, 30);
}).mouseenter(function () {
clearInterval(dd);
});
}
</
script
>
<
style
type
=
"text/css"
>
* { margin: 0; padding: 0; }
ul { list-style: none; }
li { float: left; margin-left: 10px; width: 100px; }
img { width: 100px; height: 100px; }
.a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }
</
style
>
</
head
>
<
body
>
<
div
class
=
"a"
>
<
ul
>
<
li
><
a
href
=
"#"
>
<
img
src
=
"Wife1.jpg"
alt
=
"img"
title
=
"img"
/></
a
></
li
>
<
li
><
a
href
=
"#"
>
<
img
src
=
"Wife2.jpg"
alt
=
"img"
title
=
"img"
/></
a
></
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
|
2、幻灯片
|
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
|
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
title
>幻灯片切换</
title
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
slide(".frame"); //----------------------只需要修改 ”.frame" (就是最大的div的class值这里就行---------------------
});
function slide(cls) {
$(cls).find("ul").wrap("<
div
></
div
>");
$(cls+" div").attr("class","iframe");
var li = $(cls).find("li").size();//统计多少张图片
var li_width = $(cls).find("li").width(); //获取li的宽度
$(cls + " div").children("ul").width(li_width * li);//设置宽度，使图片排成一排
var s = "<
ul
class
=
'button'
>";//生成li的按钮
for (var i = 0; i < li; i++) {
s += "<
li
>" + (i + 1) + "</
li
>";
}
s += "</
ul
>";
$(s).appendTo($(cls));//生成按钮结束,并添加到最大div里面
var _i = 0;//当前的编号
$(cls).find(".button li").each(function (i) {
//生成按钮点击事件
$(this).click(function () {
_i = i;
$(this).attr("class", "on").siblings().removeAttr("class");//设置class，没必要再多加一个off
$(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图片移动
});
}).eq(0).click();
function tt() {//定时器函数
_i++;
_i = _i % li;
$(cls).find(".button li").eq(_i).click();//自动点击切换图片
}
var t = setInterval(tt, 3000);//定时器
$(cls).hover(function () {
clearInterval(t);//鼠标经过清除定时器，离开时又触发
}, function () {
t = setInterval(tt, 3000);
})
}
</
script
>
<
style
type
=
"text/css"
>
* { margin: 0; padding: 0; }
li, ul { list-style: none; margin: 0; padding: 0; }
.frame { width: 280px; height: 280px; position: relative; margin: 0 auto; } /*这里需要修改最大div的宽度和高度*/
.iframe { overflow: hidden; width: 280px; height: 280px; } /*这里需要修改该div的宽度和高度*/
.iframe ul li { float: left; width: 280px; } /*这里需要修改li的宽度*/
.button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }
.button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }
.button .on { color: #000; background: #fff; }
</
style
>
</
head
>
<
body
>
<!-- 这里要按照这样的格式来写 -->
<
div
class
=
"frame"
>
<
ul
>
<
li
><
a
href
=
"#"
>
<
img
src
=
"Wife1.jpg"
width
=
"280"
height
=
"280"
alt
=
"img"
/></
a
></
li
>
<
li
><
a
href
=
"#"
>
<
img
src
=
"Wife2.jpg"
width
=
"280"
height
=
"280"
alt
=
"img"
/></
a
></
li
>
<
li
><
a
href
=
"#"
>
<
img
src
=
"Wife3.jpg"
width
=
"280"
height
=
"280"
alt
=
"img"
/></
a
></
li
>
<
li
><
a
href
=
"#"
>
<
img
src
=
"Wife4.jpg"
width
=
"280"
height
=
"280"
alt
=
"img"
/></
a
></
li
>
<
li
><
a
href
=
"#"
>
<
img
src
=
"Wife5.jpg"
width
=
"280"
height
=
"280"
alt
=
"img"
/></
a
></
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
|
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
