画像の効果
36013 ワード
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
>
<
title
></
title
>
<
script type
=
"
text/javascript
"
src
=
"
js/jquery-1.3.2-vsdoc.js
"
></
script
>
<
script type
=
"
text/javascript
"
src
=
"
js/jquery-1.3.2.js
"
></
script
>
<link type="text/css" href="css/play.css" rel="Stylesheet" />
</
head
>
<
body
>
<
div id
=
"
play
"
>
<
div id
=
"
play_bg
"
></
div
>
<
div id
=
"
play_info
"
></
div
>
<
div id
=
"
play_text
"
>
<
ul
>
<
li
>
1
</
li
>
<
li
>
2
</
li
>
<
li
>
3
</
li
>
<
li
>
4
</
li
>
</
ul
>
</
div
>
<
div id
=
"
play_list
"
>
<
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
"
image/B00000040.jpg
"
title
=
"
"
alt
=
"
"
/></
a
>
<
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
"
image/B00000041.jpg
"
title
=
"
"
alt
=
"
"
/></
a
>
<
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
"
image/B00000042.jpg
"
title
=
"
"
alt
=
"
"
/></
a
>
<
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
"
image/B00000045.jpg
"
title
=
"
"
alt
=
"
"
/></
a
>
</
div
>
</
div
>
<script type="text/javascript" src="js/play.js"></script>
</
body
>
</
html
>
play.cssコード
body{ font
-
size:12px; font
-
family:Verdana; margin:
0
; padding:
0
}
#play{ width:300px; height:200px; overflow:hidden; position:relative; margin:50px
0
0
50px;}
#play img{ margin:
0
; border:
0
; width:300px; height:200px;}
#play_info{ position:absolute; margin
-
top:172px; padding:8px
0
0
20px; height:20px; width:200px;color:#fff; z
-
index:
1001
; cursor:pointer ;}
#play_info b{ font
-
size:14px; display:block;}
#play_bg{ position:absolute; background
-
color:#
000
; margin
-
top:170px; width:300px; height:30px;filter: Alpha(Opacity
=
30
);opacity:
0.3
;z
-
index:
1000
}
#play_text {position:absolute;margin:180px
0
0
220px;height:20px;width:80px; z
-
index:
1002
}
#play_text ul {list
-
style
-
type:none;width:80px;height:20px; margin:
0
; display:block;padding
-
left:
0
; padding
-
top:1px;_padding
-
top:0px;filter: Alpha(Opacity
=
80
);opacity:
0.8
;}
#play_text ul li {width:14px;height:14px;
float
:left;background
-
color:#
000
;display:block;color:#FFF; text
-
align:center; margin:1px;cursor:pointer;font
-
family:
"
Courier New
"
;}
#play_list a{display:block;width:300px;height:200px;position:absolute;overflow:hidden}
play.jsコード
var t
=
0
;
var n
=
0
;
var count
=
$(
"
#play_list a
"
).size();
$(function() {
$(
"
#play_list a:not(:first-child)
"
).hide();
$(
"
#play_info
"
).html($(
"
#play_list a:first-child
"
).find(
"
img
"
).attr(
"
alt
"
));
$(
"
#play_text li:first-child
"
).css({
"
background
"
:
"
#fff
"
,
"
color
"
:
"
#000
"
});
$(
"
#play_info
"
).click(function() { window.open($(
"
#play_list a:first-child
"
).attr(
"
href
"
),
"
_blank
"
) });
$(
"
#play_text li
"
).click(function() {
var i
=
$(
this
).text()
-
1
;
n
=
i;
if
(i
>=
count)
return
;
$(
"
#play_info
"
).html($(
"
#play_list a
"
).eq(i).find(
"
img
"
).attr(
"
alt
"
));
$(
"
#play_info
"
).unbind();
$(
"
#play_info
"
).click(function() { window.open($(
"
#play_list a
"
).eq(i).attr(
"
href
"
),
"
_blank
"
) });
$(
"
#play_list a
"
).filter(
"
:visible
"
).fadeOut(
500
).parent().children().eq(i).fadeIn(
1000
);
$(
this
).css({
"
background
"
:
"
#fff
"
,
'
color
'
:
'
#000
'
}).siblings().css({
"
background
"
:
"
#000
"
,
'
color
'
:
'
#fff
'
});
})
t
=
setInterval(
"
showAuto()
"
,
2000
);
$(
"
#play
"
).hover(function() { clearInterval(t) }, function() { t
=
setInterval(
"
showAuto()
"
,
2000
); });
})
function showAuto() {
n
=
n
>=
(count
-
1
)
?
0
:
++
n;
$(
"
#play_text li
"
).eq(n).trigger(
"
click
"
);
}