图片幻灯片轮播效果，带缩略图版

　　烈火网(LieHuo.Net)教程 JavaScript实现的图片切换效果，我们以前也提到过类似效果，例如《简单高效的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" content="text/html; charset=gb2312"> <title>图片幻灯片轮播效果，带缩略图版 - liehuo.net</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="http://www.veryhuo.com/uploads/userup/87/fangxl/b1.jpg" /></a></div> <div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a href="/" target=_blank><img alt="图二" src="http://www.veryhuo.com/uploads/userup/98/liehuo_0908201.jpg" /></a></div> <div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a href="/" target=_blank><img alt="图三" src="http://www.veryhuo.com/uploads/userup/98/liehuo_0908202.jpg" /></a></div> <div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a href="/" target=_blank><img alt="图四" src="http://www.veryhuo.com/uploads/userup/98/liehuo_0908203.jpg" /></a></div> <div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a href="/" target=_blank><img alt="图五" src="http://www.veryhuo.com/uploads/userup/98/liehuo_0908204.jpg" /></a></div> <script language=javascript type=text/javascript> var picarry = {}; var lnkarry = {}; var ttlarry = {}; picarry[0] = "http://www.veryhuo.com/uploads/userup/87/fangxl/b1.jpg"; lnkarry[0] = "/"; ttlarry[0] = "图一"; picarry[1] = "http://www.veryhuo.com/uploads/userup/98/liehuo_0908201.jpg"; lnkarry[1] = "/"; ttlarry[1] = "图二"; picarry[2] = "http://www.veryhuo.com/uploads/userup/98/liehuo_0908202.jpg"; lnkarry[2] = "/"; ttlarry[2] = "图三"; picarry[3] = "http://www.veryhuo.com/uploads/userup/98/liehuo_0908203.jpg"; lnkarry[3] = "/"; ttlarry[3] = "图四"; picarry[4] = "http://www.veryhuo.com/uploads/userup/98/liehuo_0908204.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> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

图片幻灯片轮播效果，带缩略图版

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

图片幻灯片轮播效果，带缩略图版

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀