网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享
废话少说,看代码
HTML5结合CSS3实现的手动切换幻灯片动画特效源码
下载
HTML5实现的手动切换幻灯片动画特效源码是一段非常有创意的html5+css3 幻灯片切换特效，很早以前就非常喜欢的一款特效，最近刚刚找到，担心以后再也找不到了，赶紧上传上来，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。
复制代码 代码如下:
sx.activex.imagefade={
init:function(imga,fadeint,fadeoutt){
var ti=new Array();
for(var i=0;i
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
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(t1img.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. style="max-width:90%";
img.style.width="100%";
span.style.position="absolute";
span.style.right="10px";
span.style.bottom="10px";
div.appendChild(span);
return div;
}
}
调用的html
复制代码 代码如下:
上面的js函数的第一个参数是你要的图片的地址所组成的数组,第二个参数是图片淡出的timer,第三个参数是淡入的timer.
这段js的关键是a[i].onclick这段代码,注意这里套用了两个setintertval,并用了闭包,在赋值时要当心了.
有什么疑问的话还请多多交流啊
