javascript实现图片切换的幻灯片效果源代码

时间：2024-11-20 04:20:48　

网页上有许多图片切换的幻灯片效果,它们大多用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,并用了闭包,在赋值时要当心了.
有什么疑问的话还请多多交流啊

标签：幻灯片,图片切换

投稿

javascript实现图片切换的幻灯片效果源代码

猜你喜欢

如何通过Python3和ssl实现加密通信功能

100 个 Python 小例子（练习题四）

MySQL对window函数执行sum函数可能出现的一个Bug

pandas 添加空列并赋空值案例

在pandas中遍历DataFrame行的实现方法

php usort 使用用户自定义的比较函数对二维数组中的值进行排序

python开发中两个list之间传值示例

关于淘宝网导航几个让人不解的问题

用Python的线程来解决生产者消费问题的示例

javascript入门·对象属性方法大总结

PyTorch加载预训练模型实例(pretrained)

如何通俗的解释TypeScript 泛型

自制Python淘宝秒杀抢购脚本双十一百分百中

Python端口扫描简单程序

MySQL字段类型详解

php 生成短网址原理及代码

spyder快捷键与python符号化输出方式

用python构建IP代理池详解

Python多进程协作模拟实现流程

keras 解决加载lstm+crf模型出错的问题