图片切换，带缩略图版
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <HTML xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>五屏带缩略图幻灯片切换代码</title> 6 <style> 7 BODY { 8 FONT-SIZE: 9pt; BACKGROUND: #d8d8d8; MARGIN: 0px auto; COLOR: #505050; FONT-FAMILY: 宋体,arial,verdana,sans-serif,fantasy,tahoma; TEXT-DECORATION: none; background1: #c8e4f2 9 } 10 A { 11 TEXT-DECORATION: none 12 } 13 A:link { 14 COLOR: #505050; color1: #54564c 15 } 16 A:visited { 17 COLOR: #505050; color1: #54564c 18 } 19 A:hover { 20 COLOR: #d40005; TEXT-DECORATION: underline 21 } 22 A:active { 23 COLOR: #f30 24 } 25 IMG { 26 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px 27 } 28 .box { 29 FLOAT: left; WIDTH: 472px 30 } 31 .box .boxpadding { 32 PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px 33 } 34 #Slide { 35 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 36 } 37 #Slide A { 38 COLOR: #000 39 } 40 .img { 41 BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; TEXT-ALIGN: center 42 } 43 .boxpadding { 44 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 45 } 46 47 .thumb_title { 48 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 49 } 50 #Slide_Thumb { 51 MARGIN-TOP: 257px; MARGIN-LEFT: 0px; POSITION: absolute 52 } 53 .thumb_on { 54 DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer 55 } 56 .thumb_off { 57 DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer 58 } 59 .thumb_off { 60 FILTER: alpha(opacity=50); -moz-opacity: 0.5 61 } 62 .thumb_on { 63 FILTER: alpha(opacity=100); -moz-opacity: 1 64 } 65 .thumb_off IMG { 66 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 67 } 68 .thumb_on IMG { 69 BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 91px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 68px 70 } 71 </style> 72 </head> 73 <body> 74 <table width="472" height="511" border="0" align="center" cellpadding="0" cellspacing="0"> 75 <tr> 76 <td width="472"><div class=box style="MARGIN-BOTTOM: 8px"> 77 <div class=boxpadding> 78 <div id=Slide> <a id=foclnk 79 href="/" target=_blank> 80 <img id=focpic style="FILTER: RevealTrans(duration=1;ransition=12); VISIBILITY: visible; POSITION: absolute; left:484; top:94" 81 src="/jscss/demoimg/wall1.jpg" width="450" height="335" /></a> 82 <div class=thumb_title id=foctitle><a href="/" 83 target=_blank>图一</a></div> 84 <div id=Slide_Thumb> 85 <div class=thumb_on id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a 86 href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall1.jpg" /></a></div> 87 <div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a 88 href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall2.jpg" /></a></div> 89 <div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a 90 href="/" target=_blank><img alt="图三" src="/jscss/demoimg/wall3.jpg" /></a></div> 91 <div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a 92 href="/" target=_blank><img alt="图四" src="/jscss/demoimg/wall4.jpg" /></a></div> 93 <div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a 94 href="/" target=_blank><img alt="图五" src="/jscss/demoimg/wall5.jpg" /></a></div> 95 <script language=javascript type=text/javascript> 96 var picarry = {}; 97 var lnkarry = {}; 98 var ttlarry = {}; 99 picarry[0] = "http://www.codefans.net/jscss/demoimg/wall1.jpg"; 100 lnkarry[0] = "/"; 101 ttlarry[0] = "图一"; 102 picarry[1] = "/jscss/demoimg/wall2.jpg"; 103 lnkarry[1] = "/"; 104 ttlarry[1] = "图二"; 105 picarry[2] = "/jscss/demoimg/wall3.jpg"; 106 lnkarry[2] = "/"; 107 ttlarry[2] = "图三"; 108 picarry[3] = "/jscss/demoimg/wall4.jpg"; 109 lnkarry[3] = "/"; 110 ttlarry[3] = "图四"; 111 picarry[4] = "/jscss/demoimg/wall5.jpg"; 112 lnkarry[4] = "/"; 113 ttlarry[4] = "图五"; 114 </script> 115 </div> 116 </div> 117 </div> 118 </div></td> 119 </tr> 120 </table> 121 <div align="center"> 122 <SCRIPT type=text/javascript> 123 var currslid = 0; 124 var slidint; 125 function setfoc(id){ 126 document.getElementById("focpic").src = picarry[id]; 127 document.getElementById("foclnk").href = lnkarry[id]; 128 document.getElementById("foctitle").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>'; 129 currslid = id; 130 for(i=0;i<5;i++){ 131 document.getElementById("tmb"+i).className = "thumb_off"; 132 }; 133 document.getElementById("tmb"+id).className ="thumb_on"; 134 focpic.style.visibility = "hidden"; 135 focpic.filters[0].Apply(); 136 if (focpic.style.visibility == "visible") { 137 focpic.style.visibility = "hidden"; 138 focpic.filters.revealTrans.transition=23; 139 } 140 else { 141 focpic.style.visibility = "visible"; 142 focpic.filters[0].transition=23; 143 } 144 focpic.filters[0].Play(); 145 stopit(); 146 } 147 148 function playnext(){ 149 if(currslid==4){ 150 currslid = 0; 151 } 152 else{ 153 currslid++; 154 }; 155 setfoc(currslid); 156 playit(); 157 } 158 function playit(){ 159 slidint = setTimeout(playnext,4500); 160 } 161 function stopit(){ 162 clearTimeout(slidint); 163 } 164 window.onload = function(){ 165 playit(); 166 }</SCRIPT> 167 </div> 168 </body> 169 </html>
原文地址：http://www.codefans.net/jscss/code/1750.shtml
