javascript制作图片轮换效果_Javascript教程_H5之家 - 中国HTML5教程资源分享第一站

本文介绍用javascript制作图片轮换效果，原理很简单，就是设置延时执行一个切换函数，函数里面是先设置下面的缩略图列表的白框样式，再设置上面大图的src属性，在IE中显示很正常，可是在FF中会有变成先显示上面的大图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ font-family:Arial, Verdana, Helvetica, sans-serif, "宋体"; font-size:14px;}
a{ color:#fff;}
img{ border:0;}
#picBox{ width:335px; border:1px solid #000; height:317px; position:relative;}
.pic img{ width:335px; height:251px; filter:BlendTrans(duration=1);}
.txtbg{height:40px; background:#000; position:relative; margin-top:-40px; filter:alpha(opacity=50); opacity:0.5;}
.text{ line-height:40px; text-align:center;position:relative; margin-top:-40px;}
.thumbs{ position:absolute; margin-top:-4px;}
.thumbs a{ padding-top:4px; position:relative; cursor:pointer; float:left; margin-right:-3px; width:86px; height:66px;}
.thumbs img{ border:3px solid #777; width:80px; height:60px;}
.thumbs .cur{ background:url() no-repeat center top; z-index:2;}
.thumbs .cur img{ border-color:#fff;}
</style>
</head>
<body>
<div id="picBox">
<div class="pic"><a href="1"><img src="" id="curPic" /></a></div>
<div class="txtbg"></div>
    <div class="text"><a id="picLink" href="#">news link 图片链接</a></div>
    <div class="thumbs" id="thumbList">
    <a id="thumb_0" href="1"><img src="" title="aaaaaa"/></a>
        <a id="thumb_1" href="2"><img src="" title="bbbbbb"/></a>
        <a id="thumb_2" href="3"><img src="" title="cccccc"/></a>
        <a id="thumb_3" href="4"><img src="" title="dddddd"/></a>
    </div>
</div>
<br />
<br />
<br />
<br />
</body>
</html>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
var focIdx=0,nextIdx=0,timer;
var thumbs=$("thumbList").getElementsByTagName("A");
function setFocus(pic){
if(focIdx!=null)thumbs[focIdx].className="";
pic.className="cur";
focIdx=parseInt(pic.id.substring(pic.id.indexOf("_")+1,pic.id.length));
var plink=$("picLink");
plink.innerHTML=pic.getElementsByTagName("IMG")[0].title;
plink.href=pic.href;
var curPic=$("curPic");
if(curPic.filters){
  curPic.filters[0].apply();
  curPic.filters[0].play();
}
curPic.src=pic.getElementsByTagName("IMG")[0].src;
focIdx<3?nextIdx=focIdx+1:nextIdx=0;
timer=setTimeout("setFocus(thumbs[nextIdx])",2000);
}
window.onload=function(){
for(var i=0;i<thumbs.length;i++){
  thumbs[i].onmouseover=function(){
   if(timer){clearTimeout(timer)};
   setFocus(this);
  }
}
setFocus(thumbs[0]);
}
</script>