コードをコピー コードは次のとおりです: 五屏带缩略图幻灯片切换代码 </p> <p>BODY { </p> <p> FONT-SIZE: 9pt; BACKGROUND: #d8d8d8; MARGIN: 0px auto; COLOR: #505050; FONT-FAMILY: 宋体,arial,verdana,sans-serif,fantasy,tahoma; TEXT-DECORATION: none; background1: #c8e4f2 </p> <p>} </p> <p>A { </p> <p> TEXT-DECORATION: none </p> <p>} </p> <p>A:link { </p> <p> COLOR: #505050; color1: #54564c </p> <p>} </p> <p>A:visited { </p> <p> COLOR: #505050; color1: #54564c </p> <p>} </p> <p>A:hover { </p> <p> COLOR: #d40005; TEXT-DECORATION: underline </p> <p>} </p> <p>A:active { </p> <p> COLOR: #f30 </p> <p>} </p> <p>IMG { </p> <p> BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px </p> <p>} </p> <p>.box { </p> <p> FLOAT: left; WIDTH: 472px </p> <p>} </p> <p>.box .boxpadding { </p> <p> PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px </p> <p>} </p> <p>#Slide { </p> <p> 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 </p> <p>} </p> <p>#Slide A { </p> <p> COLOR: #000 </p> <p>} </p> <p>.img { </p> <p> BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; TEXT-ALIGN: center </p> <p>} </p> <p>.boxpadding { </p> <p> 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 </p> <p>} </p> <p> </p> <p>.thumb_title { </p> <p> 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 </p> <p>} </p> <p>#Slide_Thumb { </p> <p> MARGIN-TOP: 257px; MARGIN-LEFT: 0px; POSITION: absolute </p> <p>} </p> <p>.thumb_on { </p> <p> DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer </p> <p>} </p> <p>.thumb_off { </p> <p> DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer </p> <p>} </p> <p>.thumb_off { </p> <p> FILTER: alpha(opacity=50); -moz-opacity: 0.5 </p> <p>} </p> <p>.thumb_on { </p> <p> FILTER: alpha(opacity=100); -moz-opacity: 1 </p> <p>} </p> <p>.thumb_off IMG { </p> <p> 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 </p> <p>} </p> <p>.thumb_on IMG { </p> <p> BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 91px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 68px </p> <p>} </p> <p> href="/" target=_blank> src="/jscss/demoimg/wall1.jpg" width="450" height="335" /> target=_blank>图一 href="/" target=_blank> href="/" target=_blank> href="/" target=_blank> href="/" target=_blank> href="/" target=_blank> </p> <p>var picarry = {}; </p> <p>var lnkarry = {}; </p> <p>var ttlarry = {}; </p> <p>picarry[0] = "http://www.jb51.net/jscss/demoimg/wall1.jpg"; </p> <p>lnkarry[0] = "/"; </p> <p>ttlarry[0] = "图一"; </p> <p>picarry[1] = "/jscss/demoimg/wall2.jpg"; </p> <p>lnkarry[1] = "/"; </p> <p>ttlarry[1] = "图二"; </p> <p>picarry[2] = "/jscss/demoimg/wall3.jpg"; </p> <p>lnkarry[2] = "/"; </p> <p>ttlarry[2] = "图三"; </p> <p>picarry[3] = "/jscss/demoimg/wall4.jpg"; </p> <p>lnkarry[3] = "/"; </p> <p>ttlarry[3] = "图四"; </p> <p>picarry[4] = "/jscss/demoimg/wall5.jpg"; </p> <p>lnkarry[4] = "/"; </p> <p>ttlarry[4] = "图五"; </p> <p> </p> <p>var currslid = 0; </p> <p>var slidint; </p> <p>関数 setfoc(id){ </p> <p> document.getElementById("focpic").src = picarry[id]; </p> <p> document.getElementById("foclnk").href = lnkarry[id]; </p> <p> document.getElementById("foctitle").innerHTML = '<a href="' lnkarry[id] '" target="_blank">' ttlarry[id] '</a>'; </p> <p> currslid = id; </p> <p> for(i=0;i </p> <p> document.getElementById("tmb" i).className = "thumb_off"; </p> <p> }; </p> <p> document.getElementById("tmb" id).className ="thumb_on"; </p> <p> focpic.style.visibility = "非表示"; </p> <p> focpic.filters[0].Apply(); </p> <p> if (focpic.style.visibility == "visible") { </p> <p> focpic.style.visibility = "非表示"; </p> <p> focpic.filters.revealTrans.transition=23; </p> <p> } </p> <p> else { </p> <p> focpic.style.visibility = "可視"; </p> <p> focpic.filters[0].transition=23; </p> <p> } </p> <p> focpic.filters[0].Play(); </p> <p> stopit(); </p> <p>} </p> <p> </p> <p>関数 playnext(){ </p> <p> if(currslid==4){ </p> <p> currslid = 0; </p> <p> } </p> <p> その他{ </p> <p> curslid ; </p> <p> }; </p> <p> setfoc(currslid); </p> <p> playit(); </p> <p>} </p> <p>関数 playit(){ </p> <p> slidint = setTimeout(playnext,4500); </p> <p>} </p> <p>関数 stopit(){ </p> <p> clearTimeout(slidint); </p> <p> } </p> <p>window.onload = function(){ </p> <p> playit(); </p> <p>} </p> <p></p> </div> <p></body> </p> <p></html> </p> <p></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
