(带缩略图版)JS图片切换代码
发布时间:2021-12-28 13:31:39阅读:559次来源:HarmonyOS下载网 以下是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=foclnkhref="/" 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();><ahref="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall1.jpg" /></a></div> <div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><ahref="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall2.jpg" /></a></div> <div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><ahref="/" target=_blank><img alt="图三" src="/jscss/demoimg/wall3.jpg" /></a></div> <div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><ahref="/" target=_blank><img alt="图四" src="/jscss/demoimg/wall4.jpg" /></a></div> <div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><ahref="/" 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.codefans.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> 更多 0
- 联想小新笔记本装win10系统(重装win10系统教程)
联想小新笔记本装win10系统联想小新系列以其时尚的设计、出色的性能以及高性价比在市场上赢得了广泛的好评。然而,软件不断更新和个人需求的多样化,使得你可能需要对系统进行重装,以恢复电脑的最佳状态。今天,我将指导你为联想小新笔记本重新安装wi
- 有网络怎么重装系统win10(有网络如何重装系统win10)
有网络怎么重装系统win10重装系统的方法众多,包括U盘重装和光盘重装等。但是今天要介绍的是利用网络在线重装系统,这种方法更为便捷,只需要一个可靠的网络连接和一个专业的在线重装系统工具,就可以轻松完成整个重装过程。不用担心,工具是免费的。今