javascript - 如何在 Javascript 中自动化工作幻灯片-6ren

javascript - 如何在 Javascript 中自动化工作幻灯片

转载作者：太空宇宙更新时间：2023-11-03 17:54:50

24

4

我正在尝试使用纯 Javascript 和 CSS 制作的幻灯片。目前脚本在点击时运行。我还想通过自动化来添加运行它的附加功能。我该怎么做。下面是 fiddle 的链接，它在点击时起作用。
Working onclick

var images = document.getElementById('slideshow-wrapper');
var Slideshow = {
    Utils: {
        siblings: function(element) {
            var parent = element.parentNode,
                childs = parent.childNodes,
                sibls = [],
                len = childs.length,
                i;
            for (i = 0; i < len; i++) {
                var child = childs[i];
                if (child.nodeType == 1 && child.tagName.toLowerCase() == 'img' && child !== element) {
                    sibls.push(child);
                }
            }
            return sibls;
        },
        hideAll: function(elements) {
            var len = elements.length,
                i;
            for (i = 0; i < len; i++) {
                var element = elements[i];
                element.className = 'hide';

            }
        },
        show: function(element) {
            element.className = 'show';
        }
    },
    core: {
        displayNavigation: function() {
            var images = document.getElementById('slideshow-wrapper').getElementsByTagName('img'),
                len = images.length,
                i, nav = document.getElementById('slideshow-nav'),
                html = '';
            for (i = 0; i < len; i++) {
                html += '<a href="#" data-img="' + i + '">' + (i + 1) + '</a>';
            }
            nav.innerHTML = html;
        },
        navigate: function() {
            var links = document.getElementById('slideshow-nav').getElementsByTagName('a'),
                len = links.length,
                i;
            for (i = 0; i < len; i++) {
                var a = links[i];
                a.onclick = function() {
                    var $i = this.getAttribute('data-img');
                    var img = document.getElementById('slideshow-wrapper').getElementsByTagName('img')[$i];
                    Slideshow.Utils.show(img);
                    var siblings = Slideshow.Utils.siblings(img);
                    Slideshow.Utils.hideAll(siblings);
                    return false;
                };
            }
        }
    },
    init: function() {
        for (var prop in this.core) {
            if (typeof this.core[prop] === 'function') {
                this.core[prop]();
            }
        }
    }
};
Slideshow.init();
console.log(Slideshow);

我尝试在使用 setInterval 编写函数的核心对象下添加另一个函数，但无法获取它。

最佳答案

第 1 步:将以下内容插入 <head>您页面的一部分或单独的 js 文件

 <script>
<!--   
    var slideimages=new Array()
    var slidelinks=new Array()
    function slideshowimages(){
    for (i=0;i<slideshowimages.arguments.length;i++){
    slideimages[i]=new Image()
    slideimages[i].src=slideshowimages.arguments[i]
    }
    }

    function slideshowlinks(){
    for (i=0;i<slideshowlinks.arguments.length;i++)
    slidelinks[i]=slideshowlinks.arguments[i]
    }

    function gotoshow(){
    if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
    else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
    }

    //-->
    </script>

将以下内容插入 <body>您希望幻灯片放映的页面部分:

<a href="javascript:gotoshow()"><img src="FirstImage.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--

//configure the paths of the images
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>

这对你来说应该足够了，只需改变你的链接

关于javascript - 如何在 Javascript 中自动化工作幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26578147/

24

4

0

文章推荐： sql - 为什么我的用户表没有列错误？

文章推荐： C# 函数指针

文章推荐： c# - WebRequest - 防止重定向

文章推荐： ruby-on-rails - Rails - 电子邮件确认 - RecordNotFound 错误

自动化
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 5 年前。 Improve t
powershell - 从一个 Azure 自动化 Runbook 调用另一个 Azure 自动化 Runbook 时出错
背景我有一个 Azure Runbook(名为 RunStoredProcedure2)，定义如下: param( [parameter(Mandatory=$True)] [string] $Sq
mysql 自动化
我有一个名为“团队”的表，其中包含“非事件”列，另一个表“事件”，其中包含“时间”列。如果任何团队的“事件”中的最新日期发生在 X 时间之前，如何将“非事件”列更新(为 true)？我知道这可以通过
Python 自动化
下面的问题可能有点令人困惑，但我会尽力以最好的方式解释它。假设我们为一家制造公司工作。它制造然后用于制造产品的组件。在以下示例中，有 3 个组件和 2 个最终产品。组件和产品的需求如下: comp
Excel 自动化。需要从范围中选择多个项目
我有代码可以让我在一个范围内选择一个项目: COleVariant vItems = cstrAddr; hr = AutoWrap(
iPhone - iTunesConnect 自动化
我正在开发一个应用程序，该应用程序有 4 种语言的大约 50 个应用内购买，这给了我很多表单和子表单、框和子框，需要使用 iTunesConnect 的令人痛苦且设计糟糕的表单来填充。我想知道是否有
Azure 自动化 - 如何在不使用资源管理器帐户的情况下进行身份验证
我想在 Azure 自动化中使用 powershell 脚本来安排打开/关闭资源。我想在不创建帐户的情况下执行此操作，因为我们的域强制重置密码。我知道自动化帐户会创建一个证书 - 当使用资源管理器(
Azure 自动化 Powershell
我尝试从 azure 自动化 run book power shell 自动检索 azure SQL 数据库中的数据。我发现azure自动化帐户的模块中缺少SQL Server模块。我已经导入了该模块
Outlook 自动化 - 更改发件人帐户
我正在自动化 Outlook，并且需要控制电子邮件的发件人身份。用户将在 Outlook 中设置两个或多个帐户，我需要能够选择从哪个帐户发送电子邮件。有什么想法吗？需要 Outlook 2003 及
Azure 自动化 Powershell
我尝试从 azure 自动化 run book power shell 自动检索 azure SQL 数据库中的数据。我发现azure自动化帐户的模块中缺少SQL Server模块。我已经导入了该模块
java - 将数据提交到表单并与网站交互，自动化
假设我有一个网站，我可以(随时)登录并每隔 x 小时提交数据(单击登录后可见的链接)，我将如何自动化此过程？我构建了一个图形用户界面，它为用户(现在是我，为了我自己的方便)提供了一个包含一些信息的界
api - Telegram 自动化
我正在开发一个程序，它的任务是我们为它定义一些号码(我们的一些手机号码)并且它应该在 Telegram 中注册它们，然后获取发送到该号码的所有消息。如您所知，在 Telegram 中注册需要提供电话号
C# UI 自动化
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 3 年前。 Improve this qu
CSS Sprite 自动化
最近我在处理 CSS Sprite 。一切正常。我创建了一个 sprite、.css 文件和 html 结构。看起来像 .sprites{ background-image:url
c++ - 键鼠监听，自动化
我想为一款名为 Dune 2000 的策略游戏创建一个叠加层。令人讨厌的是，要创建 10 个士兵，每次完成一个都必须单击该图标。没有队列。因此，在不干扰游戏运行方式的情况下，我想听听鼠标移动的声音，当
使用子流程的 Python 自动化
我是 python 的初学者，我想从自动化开始。以下是我正在尝试执行的任务。 ssh -p 2024 root@10.54.3.32 root@10.54.3.32's password: 我尝试通过
javascript - 自动化 Chrome
当我将一些 urlencoded Javascript 粘贴到 Firefox 和 Chrome 上的 URL 时，我看到了一些奇怪的事情发生。是否可以使用此技术告诉 Chrome 访问 URL，然后
https - 自动化 https 请求的最简单方法
我需要将大量请求自动提交到基于云的数据库接口(interface) (Intelex)。没有任何方法可以批量提交某些操作，但是提交单个请求所必需的只是让经过身份验证的用户尝试打开 Web 链接。因此，
.net - 自动化 WinDBG 或以其他方式从转储文件中提取信息？
假设我有一个进程的内存转储。我想对其运行报告，所以基本上我想打开 WinDBG，加载 SOS 并运行一个脚本，该脚本运行一些命令，解析输出，然后基于此运行更多命令。除了像 SendKeys 这样的
batch-file - 自动化 FFMPEG
我正在使用 ffmpeg 创建视频剪辑。我想自动化该过程并保存剪辑，而无需手动为要保存的每个文件命名。这是我拥有的代码。它将创建并保存剪辑，但只能使用扩展名和不是名字。 @echo off cd /d

首页

博学

6Ren·AI

商城

javascript - 如何在 Javascript 中自动化工作幻灯片