JS圖片切換，帶縮略圖版_圖片特效特效

JavaScript圖片切換，帶縮略圖版，5屏圖片幻燈，其實更多一些圖片也是可以的，你只需更改數組就行，不過要對布局做些調整。

<!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" mrc="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   id="zhdxf7l"   class=box style="MARGIN-BOTTOM: 8px">
      <div   id="fvfvhlv"   class=boxpadding>
        <div   class="jhvvrhb"   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="http://p1.mb5u.com/texiao/20110225160536497.jpg" width="450" height="335" /></a>
            <div   id="pdxf7fv"   class=thumb_title id=foctitle><a href="/" 
target=_blank>圖一</a></div>
          <div   class="vn755t5"   id=Slide_Thumb>
              <div   id="lnzhddh"   class=thumb_on id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a 
href="/" target=_blank><img alt="圖二" src="http://p1.mb5u.com/texiao/20110225160536497.jpg" /></a></div>
              <div   id="rj7j5tn"   class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a 
href="/" target=_blank><img alt="圖二" src="http://p1.mb5u.com/texiao/1/20110225160536493.jpg" /></a></div>
              <div   id="nbz7txj"   class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a 
href="/" target=_blank><img alt="圖三" src="http://p1.mb5u.com/texiao/1/20110225160536494.jpg" /></a></div>
              <div   id="5t57lxb"   class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a 
href="/" target=_blank><img alt="圖四" src="http://p1.mb5u.com/texiao/1/20110225160536495.jpg" /></a></div>
              <div   id="b7jdz7d"   class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a 
href="/" target=_blank><img alt="圖五" src="http://p1.mb5u.com/texiao/1/20110225160536496.jpg" /></a></div>
              <script language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};
picarry[0] = "http://www.wf0088.comhttp://p1.mb5u.com/texiao/20110225160536497.jpg";
lnkarry[0] = "/";
ttlarry[0] = "圖一";
picarry[1] = "http://p1.mb5u.com/texiao/1/20110225160536493.jpg";
lnkarry[1] = "/";
ttlarry[1] = "圖二";
picarry[2] = "http://p1.mb5u.com/texiao/1/20110225160536494.jpg";
lnkarry[2] = "/";
ttlarry[2] = "圖三";
picarry[3] = "http://p1.mb5u.com/texiao/1/20110225160536495.jpg";
lnkarry[3] = "/";
ttlarry[3] = "圖四";
picarry[4] = "http://p1.mb5u.com/texiao/1/20110225160536496.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();
}

所屬頻道：圖片特效特效/更新時間：2012-11-19

[收藏][報錯][返回列表]

相關圖片特效特效：

JS圖片切換，帶縮略圖版_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些