`
太阳神喻
  • 浏览: 106764 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

图像自动切换

JavaScriptXHTMLHTML 
阅读更多 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像自动切换</title>
<script language =javascript > 
	var curIndex=0; 
	//时间间隔 单位毫秒 
	var timeInterval=1000; 
	var arr=new Array(); 
	arr[0]="img/01.jpg"; 
	arr[1]="img/02.jpg"; 
	arr[2]="img/03.jpg"; 
	arr[3]="img/04.jpg"; 
	arr[4]="img/05.jpg"; 
	arr[5]="img/06.jpg"; 
	arr[6]="img/07.jpg"; 
	//启动定时器
	setInterval(changeImg,timeInterval); 
	
	function changeImg() 
	{ 
		var myImg=document.getElementById("myImg"); //得到img标签
		var info = document.getElementById("info");//得到label标签
		if (curIndex==arr.length-1) 
		{ 
			curIndex=0; 
		} 
		else 
		{ 
			curIndex+=1; 
		} 
		myImg.src=arr[curIndex]; //
		info.innerText = "第"+curIndex+"张图像";//显示为当前的图像说明
	} 
</script>
</head>
<body>
    <center>
        <label id="info">图像</label><br />
        <img id="myImg" src ="img/01.jpg" border =0 width="500px" />
    </center>
</body>

 

分享到：
| javascript特殊运算符
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    背景自动切换css模板

    这个描述简洁地概述了一个使用CSS（层叠样式表）技术实现的模板，用于创建背景图像自动切换的功能。CSS是网页设计的核心语言之一，它负责定义网页元素的样式、布局和结构。通过巧妙运用CSS3的特性，如动画（@...

    煤矿斜巷轨道运输图像跟踪系统设计

    针对煤矿斜巷轨道运输运距较长、坡度较大、...该系统通过轴编码器得到矿车在巷道中的位置,当检测到矿车到达某一摄像仪覆盖区域时,采用PLC控制矩阵实现图像自动切换和显示。现场应用结果表明,该系统可靠性高,实用性强。

    图像浏览器系统.rar

    2. 定时播放：该系统支持定时播放功能，用户可以设置间隔时间让图像自动切换，类似于幻灯片展示。这一功能的实现需要结合计时器和线程控制，确保图像在指定时间间隔后平滑过渡。 3. 图像调整：图像浏览器系统提供了...

    jsp图片效果大全（图像震动效果、闪烁效果、自动切换图像）

    通过上述示例代码和解析，我们了解了如何在JSP页面中使用CSS和JavaScript来实现图像震动效果、图片闪烁效果以及自动切换图像效果。这些视觉效果可以应用于多种场景，为用户提供更为丰富的交互体验。需要注意的是，...

    仿奇异UI 图片切换自动切换 底部菜单栏 全套UI

    【标题】"仿奇异UI 图片切换自动切换 底部菜单栏 全套UI"所指的是一款设计风格模仿奇艺视频应用的用户界面（UI）设计资源，它包括了图片自动切换功能以及底部固定的菜单栏。在移动应用设计中，这样的UI设计能够提供...

    JavaScript实现背景自动切换小案例

    本文主要介绍了使用JavaScript编程语言实现网页背景图像自动切换的小案例，其中涉及到的技术点包括JavaScript的基本语法、定时器的使用方法以及DOM操作中的图像元素属性更改等。 知识点一：HTML基础 本文使用了基本...

    海康视频监控自动切换.rar

    本文将深入探讨如何利用C#编程语言实现海康视频监控的自动切换功能，以便提高监控效率和用户体验。 首先，我们要了解的是C#语言的基本概念。C#是由微软开发的一种面向对象的编程语言，它被广泛应用于Windows平台的...

    图片自动切换/幻灯片切换效果

    在网页设计中，图片自动切换或幻灯片切换效果是一种常见的功能，用于展示一组图片，如产品展示、新闻轮播或者背景图像等。这个效果可以让用户在不进行任何操作的情况下，网页上的图片能够按照预设的时间间隔自动进行...

    Image切换三种效果【自动、点击、滑动】

    本篇将探讨三种常见的图像切换效果：自动切换、点击切换以及滑动切换，并结合提供的资源"ImageSwither"来深入理解这些效果的实现。 一、自动切换 自动切换通常应用于轮播图或幻灯片展示，它会按照设定的时间间隔...

    淘宝图片自动切换

    其中，图片自动切换功能是提升商品展示效果、吸引用户注意力的重要手段之一。本文将深入解析“淘宝图片自动切换”的实现原理，以及如何利用HTML与CSS代码来创建这一功能。 ### 一、HTML与CSS：图片自动切换的核心 ...

    css3滑动图像面板图片切换css3 动画图片切换

    本文将详细讲解如何利用CSS3实现滑动图像面板的图片切换功能，以及相关的动画技术。 首先，我们需要理解CSS3中的关键帧动画（Keyframe Animations）。这种动画机制允许我们在动画的起点和终点之间定义多个中间状态...

    某市电力系统监控方案.pdf

    - 报警响应：报警发生时，图像自动切换，提供声音提示，便于快速响应。 - 远程控制：监控中心及其他网络节点能远程监控变电所状态。 6. **监控中心功能**： - 数据存储：保存报警信息和音视频录像。 - 数据请求...

    Unity精灵动画状态机自动切换

    ### Unity精灵动画状态机自动切换 #### 一、引言 在Unity开发中，动画状态机（Animator Controller）是处理复杂角色动画切换的关键工具之一。它不仅能够简化动画的管理和控制，还能帮助开发者轻松实现流畅的动画...

    VB 图片点击 切换图像 循环

    在这个特定的场景中，我们的目标是创建一个功能，当用户点击图片时，能够循环切换显示不同的图像。这个功能在许多应用中都非常实用，比如幻灯片展示、图片浏览器等。 首先，我们需要了解VB中的IMAGE控件。IMAGE控件...

    js图片自动切换插件

    在网页设计中，图片的自动切换效果是常见的增强用户体验的手段，它可以使网站看起来更加生动有趣。"js图片自动切换插件"就是这样一个工具，帮助开发者轻松实现这种效果，无需从零编写复杂的代码。 这款插件主要应用...

    dreamweaver 图片的渐渐切换

    3. **配置行为参数**：在弹出的"交换图像"或"淡入淡出"设置窗口中，指定要交换的图像文件、切换速度以及是否循环播放。如果希望图片有渐变效果，可以设置一个适当的延迟时间和透明度变化。 4. **添加额外的控制**：...

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能

    jQuery Tab 插件就是一种轻量级的解决方案，能够帮助开发者轻松实现多种交互功能，如鼠标滑过、点击切换、自动切换以及数据回调。本插件特别适合那些希望提升用户体验并简化页面布局的网站开发者。 首先，让我们...

    ABB机器人手动模式切换自动模式时，程序指针会自动PP移至Main的解决办法.docx

    ### ABB机器人手动模式切换自动模式时，程序指针会自动PP移至Main的解决办法 在使用ABB机器人进行各种工业应用时，我们经常会遇到一个常见的问题：当机器人从手动模式切换到自动模式时，程序指针（Program Pointer,...

    自动聚焦测试图像，连续变焦下测得的一系列图像

    2. **边界情况测试**：在极端的变焦条件下，例如从远距离到近距离的快速切换，测试自动对焦算法是否能迅速且准确地调整。 3. **算法优化**：如果发现某些特定变焦范围内聚焦效果不佳，可以通过调整算法参数或采用...

    自动切换电脑桌面软件V1.0.rar

    自动切换电脑桌面软件是一款实用工具，它允许用户根据个人喜好定时或随机地改变电脑的桌面壁纸，从而为工作和娱乐环境增添多样性与个性化。这款V1.0版本可能提供了基本的功能，同时也为用户带来了一些便利。 在现代...

Magicbox
Global site tag (gtag.js) - Google Analytics