小练习：图片轮播jQuery版
学习JS也有一段时间了，这是我花了近一天的时间做的练习，不会的函数就翻翻jQuery的帮助文档，还算做的比较顺利。兼容ie6（有一点点兼容性问题但不影响功能）、7、8和ff，还有一个小问题，就是ie8好像不支持jQuery的fadeIn()方法，因此ie8下没有渐变的切换效果，不知什么原因。
效果预览（预览有问题请把代码拷回本地html预览）：
代码：
<!
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
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
图片轮播jQuery版
</
title
>
</
head
>
<
style
>
*
{
margin
:
0
;
padding
:
0
;
}
body
{
background
:
#fff
}
.box
{
width
:
400px
;
height
:
300px
;
margin
:
100px auto
;
}
.imgbox
{
border
:
1px solid #3CF
;
width
:
400px
;
height
:
300px
;
position
:
relative
;
}
.imgbox img
{
border
:
none
}
.imgbox .all
{
display
:
none
;
}
.imgbox a.cur_img
{
display
:
inline
;
}
.title-bg
{
width
:
400px
;
height
:
30px
;
background
:
#000
;
filter
:
Alpha(Opacity=40)
;
opacity
:
0.4
;
position
:
absolute
;
bottom
:
0
;
*position
:
absolute
;
*left
:
0
;
}
.imgID
{
width
:
400px
;
height
:
20px
;
position
:
absolute
;
bottom
:
5px
;
left
:
5px
;
}
.imgID ul
{
height
:
20px
;
width
:
380px
;
}
.imgID li
{
display
:
inline
;
z-index
:
9999
;
list-style
:
none
;
width
:
20px
;
height
:
20px
;
color
:
#fff
;
}
.imgID li a
{
display
:
inline-block
;
width
:
20px
;
height
:
20px
;
border
:
1px solid #fff
;
background
:
#999
;
color
:
#fff
;
font-weight
:
bold
;
text-decoration
:
none
;
text-align
:
center
;
}
.imgID .cur_ID
{
background
:
#F0F
}
.imgID li a:hover
{
background
:
#F0F
;
}
.img_title
{
position
:
absolute
;
left
:
150px
;
bottom
:
0px
;
height
:
30px
;
font-weight
:
bold
;
font-size
:
15px
;
cursor
:
pointer
;
z-index
:
9000
;
}
.img_title a
{
color
:
#FFF
;
}
#title
{
display
:
block
;
height
:
30px
;
line-height
:
30px
;
text-decoration
:
none
}
#title:visited
{
color
:
#fff
}
</
style
>
<
body
>
<
div
class
="box"
>
<
div
class
="imgbox"
>
<
a
href
="#1"
title
="喜羊羊与灰太狼"
class
="cur_img all"
><
img
src
="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img01.jpg"
/></
a
>
<
a
href
="#2"
title
="大闹天宫"
class
="all"
><
img
src
="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img02.jpg"
/></
a
>
<
a
href
="#3"
title
="猫和老鼠"
class
="all"
><
img
src
="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img03.jpg"
/></
a
>
<
a
href
="#4"
title
="狮子王"
class
="all"
><
img
src
="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img04.jpg"
/></
a
>
<
div
class
="title-bg"
></
div
>
<
div
class
="img_title"
><
a
href
="#"
title
=""
id
="title"
>
这是题目
</
a
></
div
>
<
div
class
="imgID"
>
<
ul
>
<
li
><
a
href
="javascript:void(0);"
class
="cur_ID"
>
1
</
a
></
li
>
<
li
><
a
href
="javascript:void(0);"
>
2
</
a
></
li
>
<
li
><
a
href
="javascript:void(0);"
>
3
</
a
></
li
>
<
li
><
a
href
="javascript:void(0);"
>
4
</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
body
>
<
script
src
="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type
="text/javascript"
></
script
>
<
script
type
="text/javascript"
>
$(document).ready(
function
(){
var
time
=
2000
;
//
图片延时
var
curImgID
=
0
;
//
当前显示图片的序号
var
intervalID
=
setInterval(imgToggle,time);
$(
"
.img_title a
"
).text($(
"
.cur_img
"
).attr(
"
title
"
));
$(
"
.img_title a
"
).attr(
"
title
"
,$(
"
.cur_img
"
).attr(
"
title
"
));
$(
"
.img_title a
"
).attr(
"
href
"
,$(
"
.cur_img
"
).attr(
"
href
"
));
$(
"
.imgID a
"
).click(
function
(){
clearInterval(intervalID);
//
先停止定时器，保证点击了某项的时候该项有足够的时间显示
$(
"
.cur_img
"
).css({display:
"
none
"
});
//
除了cur_img外的其余图片设置为不可见
$(
"
.cur_img
"
).removeClass(
"
cur_img
"
);
$(
"
.imgbox a
"
).eq($(
"
.imgID a
"
).index($(
this
))).fadeIn(
"
slow
"
);
//
选择对应的按钮序号的图片显示，this指向你按下的按钮
$(
"
.imgbox a
"
).eq($(
"
.imgID a
"
).index($(
this
))).addClass(
"
cur_img
"
);
$(
"
.cur_ID
"
).removeClass(
"
cur_ID
"
);
$(
this
).addClass(
"
cur_ID
"
);
change();
//
change函数主要是把处理img_title的a标签的相关操作放到一起
intervalID
=
setInterval(imgToggle,time);
});
$(
"
.img_title a
"
).click(
function
(){
alert($(
this
).attr(
"
href
"
));
//
响应点击题目
});
$(
"
.imgbox img
"
).click(
function
(){
alert($(
this
).parent().attr(
"
href
"
));
//
响应点击图片
});
function
imgToggle(){
curImgID
=
$(
"
.imgID a
"
).index($(
"
.cur_ID
"
));
//
当前按钮的序号，与当前图片序号对应
$(
"
.imgbox .all
"
).css({display:
"
none
"
});
//
除了cur_img外的其余图片设置为不可见
$(
"
.cur_img
"
).removeClass(
"
cur_img
"
);
if
(curImgID
==
$(
"
.imgID a
"
).length
-
1
){
curImgID
=
0
;
}
else
{curImgID
+=
1
;}
$(
"
.imgbox a
"
).eq(curImgID).fadeIn(
"
slow
"
);
$(
"
.imgbox a
"
).eq(curImgID).addClass(
"
cur_img
"
);
$(
"
.cur_ID
"
).removeClass(
"
cur_ID
"
);
$(
"
.imgID a
"
).eq(curImgID).addClass(
"
cur_ID
"
);
change();
}
function
change(){
$(
"
.img_title a
"
).attr(
"
title
"
,$(
"
.cur_img
"
).attr(
"
title
"
));
$(
"
.img_title a
"
).text($(
"
.cur_img
"
).attr(
"
title
"
));
$(
"
.img_title a
"
).attr(
"
href
"
,$(
"
.cur_img
"
).attr(
"
href
"
));
}
});
</
script
>
</
html
>
==================================================
作者：绿色花园
出处：http://www.cnblogs.com/cos2004/archive/2011/03/10/1979625.html
==================================================