带缩略图的JS图片轮换轮播滚动切换特效代码

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

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

以下是带缩略图的JS图片轮换轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>程序员设计师联盟淘宝店</title>
</head>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script language=javascript src="js/AutoChangePhoto.js"></script>
<body>
<div class=fpic>
<a id=foclnk href="#" target=_blank><img id=focpic style="filter: revealtrans ( duration = 1，transition=23 ); visibility: visible; position: absolute" height=300 alt="" src="images/01.jpg" width=400></a> 
<div id=fttltxt 
style="margin-top: 305px; float: left; width: 400px; text-align: center"><a 
href="#" target=_blank>梦：牧场小屋</a></div>
<div style="margin-left: 402px; width: 65px">
<div class=thubpiccur id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a 
href="#" target=_blank><img 
src="images/01.jpg" alt="" width=56 height=42 border="0"></a></div>
<div class=thubpic id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a 
href="#" target=_blank><img height=45 alt="" 
src="images/02.jpg" width=56></a></div>
<div class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a 
href="#" target=_blank><img height=45 alt="" 
src="images/03.jpg" width=56></a></div>
<div class=thubpic id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a 
href="#" target=_blank><img height=45 alt="" 
src="images/04.jpg" width=56></a></div>
<div class=thubpic id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a 
href="#" target=_blank><img height=45 alt="" 
src="images/05.jpg" width=56></a></div>
<div class=thubpic id=tmb5 onmouseover=setfoc(5); onmouseout=playit();><a 
href="#" target=_blank><img height=45 alt="" 
src="images/06.jpg" width=56></a></div>
<script language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};
picarry[0] = "images/01.jpg";
lnkarry[0]  = "#";
ttlarry[0] = "梦：牧场小屋";
picarry[1] = "images/02.jpg";
lnkarry[1]  = "#";
ttlarry[1] = "碎玉：回眸";
picarry[2] = "images/03.jpg";
lnkarry[2]  = "#";
ttlarry[2] = "飞狐：豆花档";
picarry[3] = "images/04.jpg";
lnkarry[3]  = "#";
ttlarry[3] = "牛说不哭：烈日下的建筑工人";
picarry[4] = "images/05.jpg";
lnkarry[4]  = "#";
ttlarry[4] = "新疆瓦格：哈萨克族搭建毡房";
picarry[5] = "images/06.jpg";
lnkarry[5]  = "#";
ttlarry[5] = "松间明月：汽车文化";
</script>
</div></div>
</body>
</html>

JS代码(AutoChangePhoto.js):

var currslid = 0;
	var slidint;
	function setfoc(id){
	document.getElementById("focpic").src = picarry[id];
	document.getElementById("foclnk").href = lnkarry[id];
	document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
	currslid = id;
	for(i=0;
	i<6;
	i++){
	document.getElementById("tmb"+i).className = "thubpic";
}
;
	document.getElementById("tmb"+id).className ="thubpiccur";
	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==5){
	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{PADDING-RIGHT:0px;PADDING-LEFT:0px;FONT-SIZE:12px;BACKGROUND:#000;PADDING-BOTTOM:0px;MARGIN-LEFT:auto;COLOR:#f6f6ee;MARGIN-RIGHT:auto;PADDING-TOP:0px;FONT-FAMILY:����;HEIGHT:490px;TEXT-ALIGN:center}
A{COLOR:#fff;TEXT-DECORATION:none}
A:hover{COLOR:#fff;TEXT-DECORATION:underline}
.fpic{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;Z-INDEX:3;BACKGROUND:#000;BORDER-BOTTOM-WIDTH:0px;WIDTH:476px;POSITION:relative;HEIGHT:330px;BORDER-RIGHT-WIDTH:0px;BORDER:#dddddd 1px solid;text-align:center}
.bpic{FLOAT:left;MARGIN:0px;WIDTH:244px;POSITION:relative;HEIGHT:243px}
#focpic{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;LEFT:1px;BORDER-BOTTOM-WIDTH:0px;POSITION:absolute;TOP:1px;BORDER-RIGHT-WIDTH:0px}
.thubpic{PADDING-RIGHT:0px;PADDING-LEFT:4px;Z-INDEX:20;PADDING-BOTTOM:0px;WIDTH:63px;CURSOR:pointer;PADDING-TOP:4px;TOP:10px;HEIGHT:49px}
.thubpiccur{PADDING-RIGHT:0px;PADDING-LEFT:4px;Z-INDEX:20;PADDING-BOTTOM:0px;WIDTH:63px;CURSOR:pointer;PADDING-TOP:4px;TOP:10px;HEIGHT:49px}
.thubpiccur{Z-INDEX:30;BACKGROUND:url(../images/arrow3.gif) no-repeat left 50%}
.thubpic IMG{BORDER-RIGHT:#666 3px solid;BORDER-TOP:#666 2px solid;BORDER-LEFT:#666 3px solid;WIDTH:56px;BORDER-BOTTOM:#666 2px solid;HEIGHT:42px}
.thubpiccur IMG{BORDER-RIGHT:#666 3px solid;BORDER-TOP:#666 2px solid;BORDER-LEFT:#666 3px solid;WIDTH:56px;BORDER-BOTTOM:#666 2px solid;HEIGHT:42px}
.thubpiccur IMG{BORDER-LEFT-COLOR:#fff;BORDER-BOTTOM-COLOR:#fff;BORDER-TOP-COLOR:#fff;BORDER-RIGHT-COLOR:#fff}

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