Js_图片轮换-白红宇

Js_图片轮换

阅读量：5075 次

发布时间：2019-06-12

本文共 3107 字，大约阅读时间需要 10 分钟。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<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(http://img1.cn.msn.com/1/arrow2.gif) no-repeat center top; z-index:2;}

.thumbs .cur img{ border-color:#fff;}

</style>

</head>

<body>

</div>

http://www.98desk.com/d/0/5/84/2006110819532871609.jpg<br />

http://pic.yule13.com/big/ktdm/200706/02/1843311092.jpg<br />

http://www.haotuku.com/katong/sishen/066cn.jpg<br />

http://pic.yule13.com/big/ktdm/200706/02/1843566662.jpg<br />

</body>

</html>

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.οnlοad=function(){

for(var i=0;i<thumbs.length;i++){

thumbs[i].οnmοuseοver=function(){

if(timer){clearTimeout(timer)};

setFocus(this);

}

setFocus(thumbs[0]);

}

</script>

转载于:https://www.cnblogs.com/ingstyle/p/4668325.html

你可能感兴趣的文章