`
caleb_520
  • 浏览: 250820 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

利用JavaScript实现鼠标单击图片切换功能

JavaScriptXHTMLHTML 
阅读更多
下面是一个利用JavaScript实现鼠标单击图片切换功能的程序。程序很简单，但是只是拿出来和大家共享、讨论。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
	<script language="javascript">
		var number=0
		var picture =  new Array(3);
		for( var i=0;i<picture.length;i++){
			picture[i] = new Image();
		}
		function loadpicture(){
			picture[0].src = "1.jpg";
			picture[1].src = "2.jpg";
			picture[2].src = "3.jpg";

		    for( var j=0;j<=3;j++){
				document.form1.show.src = picture[number].src;
			  	number = (number + 1) % 3;
			}
		}
	</script>
</head>

<body> 
	<form name="form1" method="post" action="">
 		<img name="show" src="1.jpg" onclick="loadpicture()"></img>
	</form>
</body>
</html>
分享到：
| Struts2中的类型转换
评论
发表评论

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

相关推荐

    TweenMax.js实现的鼠标单击放大镜图片局部放大效果源码.zip

    在“TweenMax.js实现的鼠标单击放大镜图片局部放大效果源码.zip”这个项目中，我们看到的是一个利用TweenMax.js来实现的一种常见UI交互——图片放大镜效果。 首先，我们需要理解这个效果的基本原理：当用户鼠标悬停...

    css+JavaScript自学框架之幻灯片展示效果 焦点图自动播放，单击圆点切换到指定图片，鼠标放到图片上停止自动播放

    同时，可以利用CSS3的`:hover`伪类来实现在鼠标悬停时停止自动播放，鼠标离开时恢复自动播放的功能。 JavaScript则负责处理用户交互和逻辑控制。在这个幻灯片框架中，JavaScript主要实现以下功能： 1. 自动播放：...

    HTML5通过swiper实现图片预览

    在本场景中，我们关注的是如何利用HTML5和一个名为Swiper的第三方库来实现图片预览功能。Swiper是一款流行的触摸滑动库，特别适合在移动设备上创建滑动效果，如幻灯片、轮播图以及我们这里的图片预览。 Swiper库...

    基于jQuery的带缩略图左右滚动型图片切换.zip

    为了运行这个图片切换功能，需要将这个文件与HTML页面正确关联，并确保所有依赖项都被正确加载。 总的来说，这个项目展示了如何利用jQuery的强大功能来创建一个交互式的图片切换组件，它包括缩略图导航和左右滚动...

    JavaScript特效100例

    7. CSS制作的类似相册浏览的功能：通过CSS和JavaScript结合，可以实现图片的滑动切换、淡入淡出等相册效果。CSS主要负责样式布局，而JavaScript则处理动态切换逻辑。 8. 图片控制内容框的文字上下翻滚：这是一种...

    javascript表单事件汇总

    它们共同构建了丰富的鼠标交互体验，可以用于实现拖放功能、悬停效果或其他基于鼠标位置的动态行为。 ### 十一、onreset、onsubmit `onreset`和`onsubmit`事件分别在表单重置和提交时触发。它们是管理表单数据流的...

    jquery灯箱效果

    灯箱效果的核心是利用JavaScript和CSS来控制图片的显示和隐藏。当用户点击一个小图时，大图会在一个半透明的遮罩层上弹出，并且可以通过手势或导航按钮来切换图片。同时，背景页面会变暗，增加视觉焦点。 2. **...

    JavaScript网页特效范例宝典源码

    实例291 调用IE自身的打印功能实现打印 460 实例292 打印指定框架中的内容 461 实例293 利用WebBrowser打印 462 实例294 设置页眉页脚 463 11.2 利用Word打印报表 465 实例295 将页面中的表格导出到Word并打印 465 ...

    HTML+CSS+Javascript 模仿WIN 7任务栏

    它可以模拟任务栏的功能，例如点击开始按钮时显示/隐藏开始菜单，应用程序图标上的鼠标悬停效果，以及右键单击图标的上下文菜单。JavaScript库如jQuery可以帮助简化DOM操作，使得添加动态效果和处理用户事件变得更加...

    JavaScript实例精通

    16_1.htm 无刷新实现图片切换。 16_2.htm 很酷的导航特效。 16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP做一个HEAD的请求。 16_6.htm ...

    javascript客户端验证和页面特效制作

    2. **页面动态效果**：在 JavaScript 中，可以编写响应鼠标单击等事件的代码，创建动态 HTML 页面，从而高效地控制页面的内容。 ##### 三、脚本（JavaScript） 1. **脚本的执行原理**：JavaScript 脚本可以嵌入到 ...

    《JavaScript实例精通》[源代码]

    16_1.htm 无刷新实现图片切换。 16_2.htm 很酷的导航特效。 16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP做一个HEAD的请求。 16_6.htm ...

    图片浏览 上一张 下一张 效果图

    在实现这种效果时，开发人员通常会利用JavaScript、jQuery或其他前端框架如Vue或React来捕捉鼠标的滑动事件，并结合后端技术（如PHP、Python或Node.js）处理图片的加载和顺序控制。同时，为了实现鼠标指针的交互感，...

    CSS3点击图片遮罩放大显示特效.zip

    6. **JavaScript（JS）辅助**：虽然这个特效主要依赖CSS3，但有时候为了增加交互性，如关闭放大效果或处理多张图片的切换，可能需要使用JavaScript来实现动态控制。例如，可以监听`click`事件，触发图片的放大和缩小...

    图片自带文字描述，循环播放，可单击查看！

    例如，可以使用JavaScript的setInterval函数来定时切换图片，同时添加事件监听器，使得用户点击时能查看大图或者显示更多详细信息。 3. **用户交互设计**：为了提供良好的用户体验，设计上要考虑如何展示文字描述。...

    javascript事件汇总

    - **触发时机**：当用户用鼠标单击一个元素时触发。 - **应用场景**：通常用于按钮点击、链接跳转等交互场景。 2. **`ondblclick`**： - **触发时机**：当用户对一个元素进行快速连续两次点击时触发。 - **应用...

    javaScript中常用事件

    JavaScript是Web开发中的重要语言，尤其在前端领域，它的事件机制是实现用户交互的基础。本文将深入探讨JavaScript中的一些常用事件，以及它们如何工作，帮助初学者更好地理解并运用到实际项目中。 一、事件概述 ...

    dreamweaver怎么制作鼠标经过图片变换的效果?

    在网页设计中，动态效果能够增加用户的交互体验，其中一种常见的效果是鼠标经过图片时图片发生变换。在Adobe Dreamweaver（简称DW）这款强大的网页编辑工具中，我们可以轻松实现这种效果。以下将详细介绍如何使用...

    jQuery实现的带水平拖动条图片相册特效源码.zip

    在这个项目中，可能有对鼠标点击、拖动等事件的监听，如`click`事件用于单击切换图片，`mousedown`和`mouseup`事件配合实现拖动条的拖动效果。 5. **CSS样式和布局**： 为了创建美观的相册效果，CSS被用来定义元素...

    Layui点击图片弹框预览的实现方法

    总的来说，Layui为前端开发者提供了一个非常实用的图片预览功能的实现方案。通过简单的代码和对Layui组件的合理配置，即使是没有丰富经验的开发者也可以迅速在自己的项目中加入这种功能，从而提升用户的交互体验。

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