JS图片切换的具体方法(带缩略图版)

代码如下:

<!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=gb2312">

<title>五屏带缩略图幻灯片切换代码</title>

<style>

BODY {

FONT-SIZE: 9pt; BACKGROUND: #d8d8d8; MARGIN: 0px auto; COLOR: #505050; FONT-FAMILY: 宋体,arial,verdana,sans-serif,fantasy,tahoma; TEXT-DECORATION: none; background1: #c8e4f2

}

A {

TEXT-DECORATION: none

}

A:link {

COLOR: #505050; color1: #54564c

}

A:visited {

COLOR: #505050; color1: #54564c

}

A:hover {

COLOR: #d40005; TEXT-DECORATION: underline

}

A:active {

COLOR: #f30

}

IMG {

BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px

}

.box {

FLOAT: left; WIDTH: 472px

}

.box .boxpadding {

PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px

}

#Slide {

CLEAR: both; BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-BOTTOM: 6px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; WIDTH: 450px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 335px

}

#Slide A {

COLOR: #000

}

.img {

BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; TEXT-ALIGN: center

}

.boxpadding {

BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BACKGROUND: #f8f8f8; MARGIN-BOTTOM: 8px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid

}

.thumb_title {

MARGIN-TOP: 10px; BACKGROUND: #fff; FILTER: alpha(opacity=30); WIDTH: 450px; TEXT-INDENT: 10px; LINE-HEIGHT: 25px; POSITION: absolute; HEIGHT: 25px; -moz-opacity: 0.3

}

#Slide_Thumb {

MARGIN-TOP: 257px; MARGIN-LEFT: 0px; POSITION: absolute

}

.thumb_on {

DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer

}

.thumb_off {

DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer

}

.thumb_off {

FILTER: alpha(opacity=50); -moz-opacity: 0.5

}

.thumb_on {

FILTER: alpha(opacity=100); -moz-opacity: 1

}

.thumb_off IMG {

BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-TOP: 12px; BORDER-LEFT: #fff 1px solid; WIDTH: 75px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 56px

}

.thumb_on IMG {

BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 91px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 68px

}

</style>

</head>

<body>

<table width="472" height="511" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td width="472"><div class=box style="MARGIN-BOTTOM: 8px">

<div class=boxpadding>

<div id=Slide> <a id=foclnk

href="/" target=_blank>

<img id=focpic style="FILTER: RevealTrans(duration=1;ransition=12); VISIBILITY: visible; POSITION: absolute; left:484; top:94"

src="/jscss/demoimg/wall1.jpg" width="450" height="335" /></a>

<div class=thumb_title id=foctitle><a href="/"

target=_blank>图一</a></div>

<div id=Slide_Thumb>

<div class=thumb_on id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a

href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall1.jpg" /></a></div>

<div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a

href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall2.jpg" /></a></div>

<div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a

href="/" target=_blank><img alt="图三" src="/jscss/demoimg/wall3.jpg" /></a></div>

<div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a

href="/" target=_blank><img alt="图四" src="/jscss/demoimg/wall4.jpg" /></a></div>

<div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a

href="/" target=_blank><img alt="图五" src="/jscss/demoimg/wall5.jpg" /></a></div>

<script language=javascript type=text/javascript>

var picarry = {};

var lnkarry = {};

var ttlarry = {};

picarry[0] = "http://www.jb51.net/jscss/demoimg/wall1.jpg";

lnkarry[0] = "/";

ttlarry[0] = "图一";

picarry[1] = "/jscss/demoimg/wall2.jpg";

lnkarry[1] = "/";

ttlarry[1] = "图二";

picarry[2] = "/jscss/demoimg/wall3.jpg";

lnkarry[2] = "/";

ttlarry[2] = "图三";

picarry[3] = "/jscss/demoimg/wall4.jpg";

lnkarry[3] = "/";

ttlarry[3] = "图四";

picarry[4] = "/jscss/demoimg/wall5.jpg";

lnkarry[4] = "/";

ttlarry[4] = "图五";

</script>

</div>

</div>

</div>

</div></td>

</tr>

</table>

<div align="center">

<SCRIPT type=text/javascript>

var currslid = 0;

var slidint;

function setfoc(id){

document.getElementById("focpic").src = picarry[id];

document.getElementById("foclnk").href = lnkarry[id];

document.getElementById("foctitle").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';

currslid = id;

for(i=0;i<5;i++){

document.getElementById("tmb"+i).className = "thumb_off";

};

document.getElementById("tmb"+id).className ="thumb_on";

focpic.style.visibility = "hidden";

focpic.filters[0].Apply();

if (focpic.style.visibility == "visible") {

focpic.style.visibility = "hidden";

focpic.filters.revealTrans.transition=23;

}

else {

focpic.style.visibility = "visible";

focpic.filters[0].transition=23;

}

focpic.filters[0].Play();

stopit();

}

function playnext(){

if(currslid==4){

currslid = 0;

}

else{

currslid++;

};

setfoc(currslid);

playit();

}

function playit(){

slidint = setTimeout(playnext,4500);

}

function stopit(){

clearTimeout(slidint);

}

window.onload = function(){

playit();

}</SCRIPT>

</div>

</body>

</html>