您的位置：首页 > Web前端 > JavaScript

javascript实现幻灯片效果

2009-01-09 23:54 483 查看

网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享

废话少说,看代码

sx.activex.imagefade={

init:function(imga,fadeint,fadeoutt){

var ti=new Array();

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

ti[i]=new Image();

ti[i].src=imga[i]

}

var div=document.createElement("div");

var img=document.createElement("img");

img.src=ti[0].src;

var span=document.createElement("span")

span.style.backgroundColor="yellow";

var a=[];

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

a[i]=document.createElement("a")

a[i].style.backgroundColor="red";

a[i].style.width="10px";

a[i].style.margin="2px";

a[i].href="javascript:void(0)";

a[i].onclick=function(r){

return function(){

var t=100;

var t1=0;

var h=window.setInterval(function(){

if(t>=0){

img.style.filter="alpha(opacity="+t+");";

t=t-2;}

else{

window.clearInterval(h);

img.src=ti[r].src;

var h1=window.setInterval(function(){

if(t1<=100){

img.style.filter="alpha(opacity="+t1+");";

t1=t1+2;}

else{

window.clearInterval(h1);

}

},fadeint);

}

},fadeoutt);

}

}(i);

a[i].innerText=i+1;

span.appendChild(a[i]);

}

div.style.position="absolute";

div.style.height="200px";

div.style.width="200px";

div.appendChild(img);

img.style.height="100%";

img.style.width="100%";

span.style.position="absolute";

span.style.right="10px";

span.style.bottom="10px";

div.appendChild(span);

return div;

}

}

调用的html

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<script src="kongjian.js"></script>

<script>

var a=sx.activex.imagefade.init(["1.jpg","1 (1).jpg"],10,10);

a.style.height="400px";

a.style.width="400px";

//a.all[1].style.backgroundColor="green";

document.body.appendChild(a);

</script>

</body>

</html>

上面的js函数的第一个参数是你要的图片的地址所组成的数组,第二个参数是图片淡出的timer,第三个参数是淡入的timer.
这段js的关键是a[i].onclick这段代码,注意这里套用了两个setintertval,并用了闭包,在赋值时要当心了.
有什么疑问的话还请多多交流啊

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航