<script type=
"text/javascript"
>
var
pic = document.getElementsByTagName(
"img"
);
var
btn1 = document.getElementById(
"prev"
);
var
btn2 = document.getElementById(
"next"
);
var
_box = document.getElementById(
"box"
);
var
_p = document.getElementsByTagName(
"p"
);
var
num = 0;
var
timer = null;
for
(
var
j = 1;j < pic.length;j++){
setOpacity(pic[j],0);
}
function
setOpacity(elem,level){
if
(elem.filters){
elem.style.filter =
"alpha(opacity="
+ level +
")"
;
}
else
{
elem.style.opacity = level / 100;
}
}
function
fadeIn(elem){
setOpacity(elem,0);
for
(
var
i = 0;i <= 100;i++){
(
function
(pos){
setTimeout(
function
(){
setOpacity(elem,pos)
},10 * pos);
})(i);
}
}
function
fadeOut(elem){
for
(
var
i = 0;i <= 100;i++){
(
function
(pos){
setTimeout(
function
(){
setOpacity(elem,pos);
},10 *(100 - pos));
})(i);
}
}
function
converPrev(){
if
(num == 0){
fadeOut(pic[num]);
num = 4;
fadeIn(pic[num]);
}
else
{
fadeIn(pic[num-1]);
fadeOut(pic[num]);
num--;
}
showDot(num);
}
function
converNext(){
if
(num == 4){
fadeOut(pic[num]);
num = 0;
fadeIn(pic[num]);
}
else
{
fadeIn(pic[num+1]);
fadeOut(pic[num]);
num++;
}
showDot(num);
}
function
showDot(n){
for
(
var
k = 0;k < _p.length;k++){
_p[k].className=
""
;
}
_p[n].className =
"on"
;
}
for
(
var
n = 0;n < _p.length;n++){
_p[n].setAttribute(
"aindex"
,n);
_p[n].onclick =
function
(){
var
newIndex = this.getAttribute(
"aindex"
) * 1;
fadeOut(pic[num]);
fadeIn(pic[newIndex]);
num = newIndex;
showDot(num);
}
}
function
autoPlay(){
timer = setInterval(converNext,2000);
}
autoPlay();
btn1.onclick = converPrev;
btn2.onclick = converNext;
_box.onmouseout =
function
(){
autoPlay();
btn1.style.display =
"none"
;
btn2.style.display =
"none"
;
}
_box.onmouseover =
function
(){
clearInterval(timer);
btn1.style.display =
"block"
;
btn2.style.display =
"block"
;
}
</script>