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,并用了闭包,在赋值时要当心了.
有什么疑问的话还请多多交流啊
0
投稿猜你喜欢
本文实例为大家分享了python实现图书管理系统的具体代码，供大家参考，具体内容如下添加新书查询借阅二次添加新书(读取已有的.xls并修改)- 一、requests模块说明介绍Requests是Python语言的第三方的库，专门用于发送HTTP请求。特点1.Requests支持HTT
- 记录日志是我们程序中必不可少的一个功能，但是日志文件如果没有合理的管理，时间长了几百兆的日志文件就很难分析了（都不想打开看），但是又不可能经
- 本次实验利用到了cv2中的createTrackbar和getTrackbarPos函数实现一个绘图板的功能，用户可以选择矩形或是画笔模式，
- 这篇文章主要介绍了简单了解Django ORM常用字段类型及参数配置,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习
- 在js方法中添加"path= 过期时间"就可以解决这个问题。 例如：//写cookies function setCoo
- 本文实例为大家分享了python语音整点报时的具体代码，供大家参考，具体内容如下主要的技术特殊点在于PyS60的定时器最多只能定2147秒。
- 本文实例讲述了python实现美团订单推送到测试环境，提供便利操作。分享给大家供大家参考，具体如下：背景： 有时候需要在测试环境下一个美团的
- 1.文件结构MySQLdb和pymysql的使用差不多阅读的小伙伴可以自己尝试实现2.实验效果3.主文件：main.pyimport MyS
- Vue页面、组件之间传参方式繁多，此处罗列出常用的几种方式，欢迎审阅补充。一丶路由传参这里的路由传参以编程式 router.push(...
- sysdate+(5/24/60/60) 在系统时间基础上延迟5秒 sysdate+5/24/60 在系统时间基础上延迟5分钟 sysdat
- 实验室新装了keras，发现keras默认后端是tensorflow，想换回theano，看了官方文档也没搞懂，最终搞定，很简单。中文文档的
- Python使用for实现无限循环# 方法1.1：借助循环遍历列表的cycle方法from itertools import cyclefo
- 以前写过一个标签效果，外观虽然好看，但代码不太规范，实现的方法比较繁冗。需要注意的是标签的背景图，两种状态，激活的标签背景为蓝色，反之为灰色
- Python 数字类型Python 中有三种数字类型：intfloatcomplex为变量赋值时，将创建数值类型的变量：实例x = 10 &
- Anaconda 是一个旗舰版的python安装包, 因为普通的python没有库, 如果需要安装一些重要的库, 要经常一个一个下载,会非常
- /** * 递归法实现的快速排序 * @param $seq * @return array */f
- 有的同学会说，可以使用源代码搜索的办法。的确，对于一个相对简单的页面，这个方法时常奏效。但是，对于构成相对复杂的页面(比如页面嵌入很多脚本文
- 前言1.工作中，经常需要合并多个Excel文件。如果文件数量比较多，则工作量大，易出错，此时，可以使用Python来快速的完成合并。2.使用
- 大部分情况下，这种动态生成的sql查询语句写法如下： 代码如下:select A表.字段1,A表.字段2,B表.字段返回,C表.字段返回 f
