突然在网络上找不到合适的banner滑动切换代码了……之前不找的时候一搜一大把，我有点意外，好容易找到一个，竟然在笔记本电脑上不兼容。不得已，自己手写了一个，其实代码也非常简单，懂得它的原理，改淡入淡出，加上向前，向后小图标也非常容易。
请转载此文的朋友务必附带原文链接，谢谢。
原文链接：http://xuyran.blog.51cto.com/11641754/1878370
js代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//滑动切换
var
page = 1;
function
bannerSlide() {
var
len = $(
"#bd1lfimg > div dl"
).length;
if
(page == len) {
page = 1;
}
else
{
page++;
}
$(
"#bd1lfimg > div"
).animate({ marginLeft:
"-"
+ 750 * (page - 1) });
//对应banner滑动
$(
"#bd1lfsj ul li"
).stop().eq(page - 1).addClass(
"show"
).siblings().removeClass(
"show"
);
//对应小圆点样式改变
}
$(
function
() {
var
changeSelf = setInterval(bannerSlide, 4000);
//自动切换
$(
"#bd1lfsj ul li"
).on(
"click"
,
function
() {
var
index = $(
this
).index();
$(
this
).addClass(
"show"
).siblings().removeClass(
"show"
);
$(
"#bd1lfimg > div"
).stop().animate({ marginLeft:
"-"
+ 750 * index });
page = index;
})
})
|
html代码如下：
|
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
|
<!--banner滑动开始-->
<
div
class
=
"sub_box"
>
<
div
id
=
"p-select"
class
=
"sub_nav"
>
<
div
class
=
"sub_no"
id
=
"bd1lfsj"
>
<
ul
>
<
li
class
=
"show"
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
</
div
>
</
div
>
<
div
id
=
"bd1lfimg"
>
<
div
>
<
dl
class
=
"show"
>
<
dt
><
a
href
=
"#"
><
img
src
=
"../Content/images/u4618.jpg"
alt
=
""
></
a
></
dt
>
</
dl
>
<
dl
>
<
dt
><
a
href
=
"#"
><
img
src
=
"../Content/images/u4620.jpg"
alt
=
""
></
a
></
dt
>
</
dl
>
<
dl
>
<
dt
><
a
href
=
"#"
><
img
src
=
"../Content/images/u4622.jpg"
alt
=
""
></
a
></
dt
>
</
dl
>
</
div
>
</
div
>
</
div
>
<!--banner滑动结束-->
|
css代码如下：
|
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
|
/* banner滑动 开始*/
.sub_box{
width
:
750px
;
height
:
350px
;
position
:
relative
;
overflow
:
hidden
;
}
.sub_box img{
width
:
750px
;
height
:
350px
;
}
#bd1
lfimg{
position
:
relative
;
width
:
750px
;
height
:
350px
;
overflow
:
hidden
;
}
#bd1
lfimg div{
width
:
100000px
;
}
#bd1
lfimg dl{
width
:
750px
;
height
:
350px
;
position
:
relative
;
overflow
:
hidden
;
float
:
left
;
}
#bd1
lfimg dt{
width
:
750px
;
height
:
350px
;
position
:
absolute
;
left
:
0px
;
top
:
0px
;
}
.sub_nav{
width
:
150px
;
height
:
25px
;
bottom
:
0px
;
position
:
absolute
;
z-index
:
10
;
padding-bottom
:
30px
;
left
:
260px
;
}
.sub_no{
height
:
25px
;
float
:
right
;
}
.sub_no li{
display
:
block
;
width
:
15px
;
height
:
15px
;
float
:
left
;
margin-left
:
10px
;
overflow
:
hidden
;
line-height
:
25px
;
vertical-align
:
middle
;
text-align
:
center
;
background
:
#bcbcbc
;
filter:alpha(Opacity=
70
);
Opacity:
0.7
;
font-family
:
Arial
;
font-size
:
11px
;
cursor
:
pointer
;
border-radius:
50%
;
}
.sub_no li.
show
{
background
:
#fbd74f
;
width
:
20px
;
height
:
20px
;
margin-top
:
-3px
;
}
/* banner滑动 结束*/
|
如过要加上向前向后小图标，原理如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//点击切换
var page = 1;
var len = $(".bottom-list li").length;
$(".lightbox-next").click(function () {
if (page == len) {
page = 1;
} else {
page++;
}
$("#bd1lfimg > div").animate({ marginLeft: "-" + 750 * (page - 1) });//对应banner滑动
$("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");
//对应小圆点样式改变
})
$(".lightbox-prev").click(function () {
if (page == 1) {
page = len;
} else {
page--;
}
$("#bd1lfimg > div").animate({ marginLeft: "-" + 750 * (page - 1) });//对应banner滑动
$("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");
//对应小圆点样式改变
})
|
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1878370
