有缩略图5屏焦点图切换轮播滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是有缩略图5屏焦点图切换轮播滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为有缩略图5屏焦点图切换" />
<title>有缩略图5屏焦点图切换</title>
<link href="css/css.css" type=text/css rel=stylesheet>
</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" 
src="images/01.jpg" /></a>
            <div class=thumb_title id=foctitle><a href="#" 
target=_blank>Illustrator实例:MM人像</a></div>
          <div id=Slide_Thumb>
              <div class=thumb_on id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a 
href="#" target=_blank><img 
alt="NAPAD 画册版面设计作品" 
src="images/01.jpg" /></a></div>
              <div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a 
href="#" target=_blank><img 
alt="Vladimir Koncar平面设计作品欣赏" 
src="images/02.jpg" /></a></div>
              <div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a 
href="#" 
target=_blank><img alt=诺基亚概念手机设计欣赏 
src="images/03.jpg" /></a></div>
              <div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a 
href="#" 
target=_blank><img alt=2008日内瓦国际车展部分车型设计欣赏 
src="images/04.jpg" /></a></div>
              <div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a 
href="#" target=_blank><img 
alt=Illustrator实例:MM人像 
src="images/05.jpg" /></a></div>
              <script language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};

picarry[0] = "images/01.jpg";
lnkarry[0] = "#";
ttlarry[0] = "NAPAD 画册版面设计作品";

picarry[1] = "images/02.jpg";
lnkarry[1] = "#";
ttlarry[1] = "Vladimir Koncar平面设计作品欣赏";

picarry[2] = "images/03.jpg";
lnkarry[2] = "#";
ttlarry[2] = "诺基亚概念手机设计欣赏";

picarry[3] = "images/04.jpg";
lnkarry[3] = "#";
ttlarry[3] = "2008日内瓦国际车展部分车型设计欣赏";

picarry[4] = "images/05.jpg";
lnkarry[4] = "#";
ttlarry[4] = "Illustrator实例:MM人像";


      </script>
            </div>
        </div>
      </div>
    </div></td>
  </tr>
</table>
<br>
<script src="js/show_ads(1).js" type=text/javascript></script>
</body></html>

JS代码(show_ads(1).js):

//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();
}

CSS代码(css.css):

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}

附件:下载该文件资源,减少时间成本(增值服务)