画像の入れ替え
63392 ワード
コード
<!
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
>
picsGlide
</
title
>
<
style
type
="text/css"
>
body
{
font-size
:
12px
;
color
:
#333
;
}
#picBox
{
width
:
610px
;
height
:
205px
;
margin
:
50px auto
;
overflow
:
hidden
;
position
:
relative
;
}
#picBox ul#show_pic
{
margin
:
0
;
padding
:
0
;
list-style
:
none
;
height
:
205px
;
width
:
3050px
;
position
:
absolute
;
}
#picBox ul#show_pic li
{
float
:
left
;
margin
:
0
;
padding
:
0
;
height
:
205px
;
}
#picBox ul#show_pic li img
{
display
:
block
;
}
#icon_num
{
position
:
absolute
;
bottom
:
0px
;
right
:
10px
;
}
#icon_num li
{
float
:
left
;
background
:
url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0
;
width
:
15px
;
height
:
15px
;
list-style
:
none
;
color
:
#39F
;
text-align
:
center
;
cursor
:
pointer
;
padding
:
0
;
margin
:
0
;
margin-right
:
5px
;
}
#icon_num li:hover,#icon_num li.active
{
background
:
url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0
;
color
:
#fff
;
}
#picBox_top
{
width
:
610px
;
height
:
205px
;
margin
:
50px auto
;
position
:
relative
;
overflow
:
hidden
;
}
#picBox_top ul#show_pic_top
{
margin
:
0
;
padding
:
0
;
list-style
:
none
;
height
:
205px
;
width
:
610px
;
position
:
absolute
;
}
#picBox_top ul#show_pic_top li
{
float
:
left
;
margin
:
0
;
padding
:
0
;
height
:
205px
;
}
#picBox_top ul#show_pic_top li img
{
display
:
block
;
}
#icon_num_top
{
position
:
absolute
;
bottom
:
0px
;
right
:
10px
;
}
#icon_num_top li
{
float
:
left
;
background
:
url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0
;
width
:
15px
;
height
:
15px
;
list-style
:
none
;
color
:
#39F
;
text-align
:
center
;
cursor
:
pointer
;
padding
:
0
;
margin
:
0
;
margin-right
:
5px
;
}
#icon_num_top li:hover,#icon_num_top li.active
{
background
:
url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0
;
color
:
#fff
;
}
</
style
>
</
head
><
body
>
<
div
id
="picBox"
>
<
ul
id
="show_pic"
style
="left: -610px;"
>
<
li
><
img
src
="QQ _files/manage.jpg"
alt
=""
title
=""
width
="610"
height
="205"
></
li
>
<
li
><
img
src
="QQ _files/player.jpg"
alt
=""
title
=""
width
="610"
height
="205"
></
li
>
<
li
><
img
src
="QQ _files/py.jpg"
alt
=""
title
=""
width
="610"
height
="205"
></
li
>
<
li
><
img
src
="QQ _files/xf.jpg"
alt
=""
title
=""
width
="610"
height
="205"
></
li
>
<
li
><
img
src
="QQ _files/TT.jpg"
alt
=""
title
=""
width
="610"
height
="205"
></
li
>
</
ul
>
<
ul
id
="icon_num"
>
<
li
class
=""
>
1
</
li
>
<
li
class
="active"
>
2
</
li
>
<
li
class
=""
>
3
</
li
>
<
li
class
=""
>
4
</
li
>
<
li
class
=""
>
5
</
li
>
</
ul
>
</
div
>
<
script
type
="text/javascript"
>
/*
*
*glide.layerGlide((oEventCont,oSlider,sSingleSize,sec,fSpeed,point);
*@param auto type:bolean true
*@param oEventCont type:object
*@param oSlider type:object
*@param sSingleSize type:number （width height） point
*@param second type:number /
*@param fSpeed type:float 0.05--1 1
*@param point type:string left or top
*/
var
glide
=
new
function
(){
function
$id(id){
return
document.getElementById(id);};
this
.layerGlide
=
function
(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point){
var
oSubLi
=
$id(oEventCont).getElementsByTagName(
'
li
'
);
var
interval,timeout,oslideRange;
var
time
=
1
;
var
speed
=
fSpeed
var
sum
=
oSubLi.length;
var
a
=
0
;
var
delay
=
second
*
1000
;
var
setValLeft
=
function
(s){
return
function
(){
oslideRange
=
Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point]
=-
Math.floor(oslideRange
+
(parseInt(s
*
sSingleSize)
-
oslideRange)
*
speed)
+
'
px
'
;
if
(oslideRange
==
[(sSingleSize
*
s)]){
clearInterval(interval);
a
=
s;
}
}
};
var
setValRight
=
function
(s){
return
function
(){
oslideRange
=
Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point]
=-
Math.ceil(oslideRange
+
(parseInt(s
*
sSingleSize)
-
oslideRange)
*
speed)
+
'
px
'
;
if
(oslideRange
==
[(sSingleSize
*
s)]){
clearInterval(interval);
a
=
s;
}
}
}
function
autoGlide(){
for
(
var
c
=
0
;c
<
sum;c
++
){oSubLi[c].className
=
''
;};
clearTimeout(interval);
if
(a
==
(parseInt(sum)
-
1
)){
for
(
var
c
=
0
;c
<
sum;c
++
){oSubLi[c].className
=
''
;};
a
=
0
;
oSubLi[a].className
=
"
active
"
;
interval
=
setInterval(setValLeft(a),time);
timeout
=
setTimeout(autoGlide,delay);
}
else
{
a
++
;
oSubLi[a].className
=
"
active
"
;
interval
=
setInterval(setValRight(a),time);
timeout
=
setTimeout(autoGlide,delay);
}
}
if
(auto){timeout
=
setTimeout(autoGlide,delay);};
for
(
var
i
=
0
;i
<
sum;i
++
){
oSubLi[i].onmouseover
=
(
function
(i){
return
function
(){
for
(
var
c
=
0
;c
<
sum;c
++
){oSubLi[c].className
=
''
;};
clearTimeout(timeout);
clearInterval(interval);
oSubLi[i].className
=
"
active
"
;
if
(Math.abs(parseInt($id(oSlider).style[point]))
>
[(sSingleSize
*
i)]){
interval
=
setInterval(setValLeft(i),time);
this
.onmouseout
=
function
(){
if
(auto){timeout
=
setTimeout(autoGlide,delay);};};
}
else
if
(Math.abs(parseInt($id(oSlider).style[point]))
<
[(sSingleSize
*
i)]){
interval
=
setInterval(setValRight(i),time);
this
.onmouseout
=
function
(){
if
(auto){timeout
=
setTimeout(autoGlide,delay);};};
}
}
})(i)
}
}
}
glide.layerGlide(
true
,
'
icon_num
'
,
'
show_pic
'
,
610
,
2
,
0.1
,
'
left
'
);
</
script
>
</
body
></
html
>
出どころを忘れる.