javascript - 在html/css/javascript中使图片缓慢变化-6ren

javascript - 在html/css/javascript中使图片缓慢变化

转载作者：行者123 更新时间：2023-11-28 17:46:05

31

4

我正在使用此代码在时间间隔后更改图像。自然地，它们消失得非常快，而且不太好。怎样才能让它变得更慢更漂亮呢？

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
    //change the image
    if(!imageID){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID++;
    }
    else{if(imageID==1){
        document.getElementById("myimage").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID++;
    }else{if(imageID==2){
        document.getElementById("myimage").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='300px' height='250px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body></html>

最佳答案

使用以下方式，使用淡入淡出，查看链接Fadein Fadeout

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
    //change the image
    $("#myimage").fadeOut();
    $("#myimage").fadeIn();
    if(!imageID){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID++;
    }
    else{if(imageID==1){
        document.getElementById("myimage").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID++;
    }else{if(imageID==2){
        document.getElementById("myimage").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='300px' height='250px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body></html>

关于javascript - 在html/css/javascript中使图片缓慢变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23182939/

31

4

0

文章推荐： javascript - 在 fetch 中添加 catch 时出错

文章推荐：使用 os.system 的 python 超时

eclipse (Luna)缓慢
我最近从 Indigo“升级”到了 Luna(Oracle OEPE 安装)。请注意围绕“升级”一词的引用。不幸的是，事情很慢。我使用的项目是一个 Maven 多模块项目。构建工作区操作大约需要
事件之外的 JavaScript 缓慢
如果我的 JavaScript 事件似乎都不是网页性能问题的原因，我该如何诊断网页性能问题？我有一个使用jqGrid的网络应用程序。单击网格会导致 2-3 秒的卡住，然后发生任何事情(包括点击任何单
java - Appengine 缓慢
从 appengine 访问我的应用程序时，我经常收到以下错误。有人可以知道这是什么原因吗？原因:com.google.apphosting.api.DeadlineExceededExceptio
PHP curl 缓慢
出于某种原因，我的 curl 调用非常慢。这是我使用的代码。 $postData = "test" $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $
stackdriver - 谷歌 stackdriver 缓慢
Stackdriver 测试我的网站启动速度慢我们使用 cloudflare 作为我们的站点 CDN 提供商。我们使用 stackdriver 从外部测试站点可用性，我们将时间检查间隔设置为 1 分
sqlite - SQLite更新ONE记录非常(相对)缓慢
在插入/更新许多行时，我知道SQLite的“问题”，但事实并非如此。我正在更新包含约250条记录的表中的ONE一行（由PK索引）中的ONE字段。查询通常需要200毫秒左右的时间。听起来很少，但很大。
mongodb - 如何诊断周期性 MongoDB 缓慢？
我们的 Mongo 数据库会定期(有时每天一次)变慢约 30-40 分钟。在此缓慢时期，访问数据库的 API 会遇到每 5-10 分钟就会出现一次的高延迟峰值。查看 mongod 日志文件，这两
c# - Windows窗体应用程序-缓慢/无响应的UI
这个问题已经在这里有了答案: 已关闭8年。 Possible Duplicate: C# WinForm Application - UI Hangs during Long-Running Oper
java - 创建索引时 Liquibase 缓慢
我最近将我的 Java Liquibase 版本从 3.5.3 升级到 3.6.3 我有一个非常繁重的环境，其中有很多数据库和表(我使用的是 Oracle)。在这种环境下，我试图执行一个巨大的变更日
autotools - Libtool 缓慢，双重构建？
在我的项目中，为了整洁起见，模块被组织在子目录中。我的项目目录层次结构: $ ls -R .: configure.in Makefile.am Makefile.cvs src
nginx - Gitlab 初始页面加载超时/缓慢
我正在 Debian 上使用存储库中的软件包运行 Gitlab。大多数时候Gitlab运行速度非常快，但是在较长的空闲时间后Gitlab非常慢甚至超时(错误502)。有一次我在远程 git 访问上也遇
grails - 在Grails中删除对象的问题-缓慢，但仍未真正删除
这可能是菜鸟的错误，所以请原谅我。我在高处和低处寻找解决方案，但没有结果-因此，我想在此添加第一篇文章:-) 我有两个域类，一个称为Domain，一个称为Page。如下代码所示，域中有许多页面。 cl
javascript - 对输入更改 react 缓慢
我是 React 的新手，在使用 onChange 时遇到了问题在大数据列表中生成的输入字段上的方法。如 parentcomponent是数据的拥有者，我提供了handleUpdate()子组件 (
Webpack DefinePlugin 缓慢。还有其他选择吗？
我们使用 Webpack DefinePlugin 为不同的渲染模式生成输出包。因此，例如，我们的 webpack 配置将返回 [{ entry: { mode1: "./in
jquery - 滚动事件 react 缓慢
我在页面顶部有一个带有菜单的标题元素。当我向下滚动时，标题会动画到较低的高度。当我向上滚动并到达顶部时，标题会以动画方式显示为原始大小。但它的工作并不完美。有时，事情发生之前需要两秒钟。特别是当我向
javascript - 用于匹配有限深度嵌套字符串的正则表达式——缓慢、崩溃的行为
我今天在我的文本编辑器(Sublime)中写了一些正则表达式，试图快速找到特定的源代码段，这需要有点创意，因为有时函数调用可能包含更多函数调用。例如，我正在寻找 jQuery 选择器: $("div[
c++ - 丰富的编辑控件中鼠标滚轮滚动滞后/缓慢。如何解决这个问题？
ParentSadly 我没有通过搜索“laggy/slow mouse wheel-scrolling in Rich Edit control”和类似的句子找到答案。我创建了一个丰富的编辑控件
Mysql 缓慢 "OR"运算符，但联合或两个单独的联接似乎没有选择
我遇到了“OR”运算符在 mysql 中未使用任何索引的典型性能问题: SELECT sms.smsID, sms.phonenumber, sms.text, date, mbr.name, mbr
python - 如何调试异步 aiohttp 缓慢
我最近一直在玩 asyncio 模块。下面是我想出的用于发送一些并行请求的代码，这些请求在我的笔记本电脑 (Mac OS) 上似乎运行良好，但在另一台机器 (Ubuntu 18.04) 上似乎运行缓慢
c# - 进程外 COM 缓慢
我目前正在开发一个并行应用程序(C#、WinForms)，它通过 COM 将消息注入(inject)应用程序。此应用程序使用多个 foreach 语句，从接受 COM 的应用程序中轮询实体指标。 L

首页

博学

6Ren·AI

商城

javascript - 在html/css/javascript中使图片缓慢变化