首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在一个页面上使用两个javascript幻灯片?html

如何在一个页面上使用两个javascript幻灯片?html
EN

Stack Overflow用户
提问于 2017-01-14 21:09:59
回答 1查看 90关注 0票数 0

嗨,我正在做HTML在过去的3个月的大学,并必须设计一个网站。我几乎完成了,但我试图把4张幻灯片放在一页上。我可以让它工作得很好,但是我创建的下一个似乎会覆盖第一个。有没有人能看一下我的代码,告诉我该怎么做..这里是我的代码,除了链接和图片是不同的两个幻灯片。

代码语言:javascript
运行
AI代码解释
复制
var i = 0; 
		var image = new Array();   
		// LIST OF IMAGES 
		image[0] = "strawberrypancakes.jpg" 
		image[1] = "chickenbroth.jpg"; 
		image[2] = "noodlesalad.jpg";   
		var k = image.length-1;    

		var caption = new Array(); 
		// LIST OF CAPTIONS 
		caption[0] = "Strawberry buckwheat pancakes"; 
		caption[1] = "Hot chicken broth"; 
		caption[2] = "Pepper and noodle salad"; 

		var link= new Array();   
		// LIST OF LINKS 
		link[0] = "http://www.jamieoliver.com/recipes/breakfast/"; 
		link[1] = "http://www.jamieoliver.com/recipes/chicken/"; 
		link[2] = "http://www.jamieoliver.com/recipes/vegetables/";   
					    

		function swapImage(){ 
		var el = document.getElementById("mydiv"); 
		el.innerHTML=caption[i]; 
		var img = document.getElementById("slide"); 
		img.src= image[i]; 
		var a = document.getElementById("link"); 
		a.href= link[i]; 

		if(i < k ) { i++;}  
		else  { i = 0; } 
                setTimeout("swapImage()",5000); 
					} 
		function addLoadEvent(func) { 
		var oldonload = window.onload; 
		if (typeof window.onload != 'function') { 
		window.onload = func; 
		} else  { 
		window.onload = function() { 
		if (oldonload) { 
		oldonload(); 
		} 
		func(); 
		} 
		}
		} 
		addLoadEvent(function() { 
		swapImage(); 
		});  
代码语言:javascript
运行
AI代码解释
复制
		<table style="border:none;background-color:transparent;"> 
		<tr> 
	        <td> 
         <a name="link" id="link" href="http://www.siteforinfotech.com/"       target="_blank"><img name="slide" id="slide" alt 

	="my images" height="250" width="590" src="image-1.png"/></a> 
		</td> 
		</tr> 
		<tr> 
		<td align="center"style="font:small-caps bold 15px georgia; color:blue;"> 
		<div id ="mydiv"></div>
		</td> 
		</tr>  
		</table>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-14 21:27:15

最简单的事情就是复制幻灯片的超文本标记语言结构,将ID和NAME属性更改为link2、slide2和mydiv2,然后复制交换函数,将其命名为swapImage2(),然后像这样添加它:

代码语言:javascript
运行
AI代码解释
复制
addLoadEvent(function() {
    swapImage();   // for the first slideshow
    swapImage2();  // for second slideshow
});

一种更简洁的解决方案是使用单个swapimage函数,并向其中传递您想要作为目标的目标DOM元素/幻灯片。

下面是我能想到的最快的Fiddle Example方式

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41655033

复制
相关文章
vue如何在页面上面输出html代码效果
一般情况下vue中使用双大括号{{这里是变量}} 这种形式输出变量的话,即使变量中是html代码,它输出的结果也会将html代码转为普通文本输出。
刘金玉编程
2020/05/08
5.8K0
vue如何在页面上面输出html代码效果
如何在 JavaScript 中处理 HTML 事件?
在Web开发中,JavaScript是一种常用的脚本语言,用于增强网页的交互性和动态性。HTML事件是用户与网页交互时发生的动作,如点击、鼠标移动、键盘输入等。本文将介绍如何在JavaScript中处理HTML事件,以实现更丰富的用户体验和交互功能。
海拥
2023/06/27
4190
如何在 JavaScript 中处理 HTML 事件?
如何在静态页面上使用markdown排版 原
”Markdown是一种轻量级标记语言,创始人是约翰·格鲁伯(John Gruber)。它允许人们 “使用易读易写的纯文本格式编写文档,然后转换成有效的 HTML 文档。”,转换成html最方便的方式是用插件
tianyawhl
2019/04/04
1.3K0
如何在静态页面上使用markdown排版
                                                                            原
Javascript将HTML转成PDF并下载「支持多页」
由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览器生成,使用很方便。
用户1093975
2018/08/03
3.9K0
如何在 JavaScript 中使用正则表达式删除 HTML 标签?
        正则表达式将标识 HTML 标签,然后使用 replace() 将标签替换为空字符串。假设我们有以下 HTML -
很酷的站长
2022/12/04
1.8K0
如何在 JavaScript 中使用正则表达式删除 HTML 标签?
在HTML中使用JavaScript
前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果 JavaScript代码嵌入网页的方法 1、<script>元素直接嵌入代码 <script type="text/javascript"> function sayHello() { alert("hello!"); } </script> 2、<script>元素加载外部脚本 <script type="text/javascript" sr
pitaojin
2018/05/25
1.4K0
使用HTML+CSS实现一个静态页面——面包蛋糕 (9页)
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作
IT司马青衫
2022/08/23
5950
使用HTML+CSS实现一个静态页面——面包蛋糕 (9页)
如何在JavaScript中使用for循环
循环允许我们通过循环数组或对象中的项并做一些事情,比如说打印它们,修改它们,或执行其他类型的任务或动作。JavaScript有各种各样的循环,for循环允许我们对一个集合(如数组)进行迭代。
chuckQu
2022/11/28
5.2K0
如何在JavaScript中使用for循环
如何在Swing组件中使用HTML
许多Swing组件在其GUI中显示文本字符串。默认情况下,组件的文本以一种字体和颜色显示,并且全部显示在一行上。 可以分别通过调用组件的setFont和setForeground方法来确定组件文本的字体和颜色。例如,以下代码创建一个标签,然后设置其字体和颜色:
JavaEdge
2021/02/22
2.6K0
如何在Swing组件中使用HTML
小程序解析html渲染在页面上
最近项目上遇到在微信小程序里需要显示商品内容,商品内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的。
江一铭
2022/06/16
1.4K0
小程序解析html渲染在页面上
二、在HTML中使用JavaScript
defer属性可以让脚本在文档完全呈现之后再执行,延迟脚本总是按照指定它们的顺序执行。
jojo
2022/03/21
8280
javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
许多项目不是从定义的结构开始, 而是随着时间的流逝而变化。例如, 一个基本博客可能从一开始就使用HTML格式将其内容存储在数据库中, 但是由于其简单性, 总有一天某人可能希望开始使用Markdown而不是HTML, 在这种情况下, 你需要从一种格式转换为另一种格式。如果你将服务器端逻辑与JavaScript(Node.js)一起使用, 甚至直接在浏览器中将HTML转换为编辑器中的Markdown, 则可以使用Turndown库轻松地完成此类任务, HTML到用JavaScript编写的Markdown转换器。
全栈程序员站长
2022/10/04
4.1K0
SAP MM MIGO界面上的Freight标签页
这是笔者玩SAP系统十多年来第一次知道的,就在今天,就在刚刚。自然引起了笔者强烈的好奇心。经过上网查资料,得到了一些有用的信息,整理成本文,算是做一个学习笔记吧!
SAP虾客
2022/01/25
7960
SAP MM MIGO界面上的Freight标签页
使用 HTML、CSS、JavaScript 创建一个简单的井字游戏
使用 javascript 创建游戏是最有趣的学习方式。它会让你保持动力,这对于学习 Web 开发等复杂技能至关重要。此外,你可以和你的朋友一起玩,或者只是向他们展示你做的小东西,他们也会感到很有趣的。在今天的博文中,我们将使用 HTML、CSS 和 Javascript 创建一个井字游戏。
海拥
2021/11/25
2K0
如何在纯 JavaScript 中使用 GraphQL
除了 REST 以外,很多 API 都开始支持 GraphQL,甚至完全支持它了。但是,如果你需要使用一个 GraphQL API,你很自然就会想到自己需要使用 React 和 / 或其他一些库才能让它跑起来。这是因为许多教程和示例代码似乎都基于这样一个假设,也就是说如果你在使用 GraphQL,就需要使用这些库。
深度学习与Python
2021/02/05
3.6K0
如何在JavaScript中使用高阶函数
原文链接:https://www.sitepoint.com/higher-order-functions-javascript/[1]
chuckQu
2022/09/20
1.5K0
重学js之在HTML中使用JavaScript
2、值得注意的是在js代码解析的过程中页面中其他内容将不会被加载和解析,直到该段js执行完成。
执行上下文
2022/07/26
8240
如何在html中使用Vue3
在html中的话,我们需要引入https://unpkg.com/http-vue-loader,具体如下
半月无霜
2023/10/18
1.2K0
如何在html中使用Vue3
JavaScript HTML DOM - 改变 HTML
今天的日期是: Mon Jul 19 2021 15:52:44 GMT+0800 (中国标准时间)
陈不成i
2021/07/20
4.3K0
一个基于HTML,Javascript的消除游戏
消除游戏-消消乐 一个基于HTML,Javascript的消除游戏。使用了createjs框架。 ---- -> view online demo ---- screenshot: Example 1: Example “hint()”: Example [col&row]: { col:20, //set 20 columns row:16, //set 16 rows } usage: <div class="game-container"> <canv
海拥
2021/08/23
1.4K0
一个基于HTML,Javascript的消除游戏

相似问题

如何在HTML页面上使用这个javascript?

54

如何在html页面上使用JavaScript代码?

11

如何在一个页面上启用多个javascript幻灯片?

111

javascript幻灯片显示同一页面上的链接

10

一个html5页面上的Javascript活动链接

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档