`
jackroomage
  • 浏览: 1225696 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

js 图片切换功能

 
阅读更多

jsp 显示代码如下：

 

<%@ page language="java" contentType="text/html"
    pageEncoding="utf-8"%>
<html>
<head>
<title>Insert title here</title>
<script src="./js/thumbnails.js" type="text/javascript"></script>
</head>
<body>
<div>

<div id="thumbnailPane">
<img src="./abc/a.jpg" id="a" width="200" height="155" title="a">
<img src="./abc/b.jpg" id="b" width="200" height="155" title="b">
<img src="./abc/c.jpg" id="c" width="200" height="155" title="c">
</div>

<div id="detailsPane">
<img src="./abc/d.jpg" id="d" width="420" height="365" title="d">
</div>

</div>
</body>
</html>

 

 

js 代码如下

 

window.onload = initPage;
function initPage(){
thumbs = document.getElementById("thumbnailPane").getElementsByTagName("img");
for(var i=0;i<thumbs.length;i++){
  arr=thumbs[i];
 //鼠标放上去显示。
  arr.onmouseover=function(){
 //点击鼠标显示
//  arr.onclick=function(){
    detailURL='./abc/'+this.title+'.jpg';
    document.getElementById("d").src=detailURL;
   }
 }
}

 

 

 

图片在附件中：

分享到：
| 得到当前月份的第一天和最后一天
评论
发表评论

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

相关推荐

    js实现的图片切换功能

    以上就是一个基本的JavaScript图片切换功能实现。当然，实际应用中可能需要考虑更多细节，如过渡动画、触发动画的事件触发器、响应式设计等。标签“js pic exchange”也暗示了我们可以将此功能扩展到更复杂的图片...

    js 图片切换 js 图片切换js 图片切换

    - **自适应布局**：为了让图片切换功能在不同设备上都能正常工作，需要考虑响应式设计，使布局能够根据屏幕大小自动调整。 - **性能优化**：考虑到图片加载可能会导致页面加载速度变慢，可以通过懒加载等技术来提高...

    javascript 图片切换，自动切换。

    总结，JavaScript图片切换功能的关键在于利用DOM操作改变图片的显示状态，通过事件监听响应用户操作，结合定时器实现自动切换。这个功能对于网站来说非常实用，可以提高用户的浏览体验。在实际项目中，还可以结合CSS...

    JS多种新闻图片切换效果

    - 将JavaScript代码与HTML元素绑定，确保图片切换功能可以正常运行。 6. 扩展与优化： - 自适应布局：确保图片切换效果在不同设备和屏幕尺寸上都能正常工作。 - 添加无限循环：让图片轮播无边界，提高用户体验。...

    JS图片切换广告网页特效

    在网页设计中，JS图片切换功能是提升用户体验的重要手段，它能够有效地吸引用户的注意力，同时也可以展示更多的信息。 首先，我们要理解JS（JavaScript）的基本概念。JavaScript是一种解释型的、基于原型的、动态...

    FLASH图片切换、javascript图片切换

    "FLASH图片切换"和"javascript图片切换"是两种常用的技术手段，各有其特点和适用场景。 首先，我们来谈谈“FLASH图片切换”。Flash是一种由Adobe公司开发的多媒体创作平台，它曾广泛用于创建动画、交互式内容和网页...

    JavaScript图片切换效果.rar

    本资源"JavaScript图片切换效果.rar"提供了一个实例，可以帮助开发者理解并掌握如何创建图片切换功能。 首先，我们来看一下JavaScript在图片切换中的基本原理。图片切换通常是通过改变图片元素的`src`属性来实现的...

    js 图片切换 上一张下一张效果

    在JavaScript编程中，图片切换效果是一种常见的网页交互功能，它为用户提供了一种动态浏览多张图片的方式。在本文中，我们将深入探讨如何使用JavaScript实现图片切换的“上一张”和“下一张”功能。 首先，我们需要...

    网上商城适用的JS图片切换.rar

    这个JS图片切换功能的设计目标是最多支持5张图片进行平滑过渡，这样的限制使得它适合小型的焦点图或幻灯片展示。对于那些不希望首页过于复杂，但仍想通过动态展示来吸引用户注意力的网上商城来说，这是一个理想的...

    js特效(大全),图片切换JS 图片放大JS

    1. 图片切换的JavaScript脚本，如`imageSlider.js`，它可能实现了上述提到的图片轮播功能。 2. 图片放大的JavaScript实现，例如`imageZoom.js`，可能使用了HTML5的特性来实现图片放大效果。 3. 相关的HTML和CSS文件...

    JavaScript图片切换滑动效果

    JavaScript图片切换滑动效果是一种常见的网页动态展示技术，它通过编程方式实现图片的平滑过渡，为用户带来更丰富的视觉体验。在网页设计中，这种效果通常用于相册、产品展示或者广告轮播等场景。以下将详细讲解实现...

    js图片切换，点击切换

    "js图片切换，点击切换"这一主题涉及到JavaScript（简称JS）技术在实现动态图片展示中的应用。JavaScript是一种广泛使用的客户端脚本语言，它允许我们通过用户的交互（如点击事件）来改变页面内容，提供更丰富的用户...

    JavaScript图片切换展示效果.rar

    在本项目中，"JavaScript图片切换展示效果.rar"包含了实现这一功能的代码和其他相关资源。 首先，我们需要理解JavaScript的基本概念。JavaScript是一种广泛使用的客户端脚本语言，它允许开发者在用户的浏览器上运行...

    图片切换功能jQuery

    jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使得实现图片切换功能变得更加便捷。本教程将深入探讨如何利用jQuery来创建一个图片切换功能，适用于网页中的相册或类似应用。 ...

    90个js图片切换代码

    在"90个js图片切换代码"这个资源包中，很可能包含了多种不同的图片轮播或幻灯片展示的实现方式，这些都是网页设计中常用的元素，能够提升用户体验，吸引用户注意力。 1. **基础概念**： - **图片切换**：是指在...

    启明星JS图片切换系统源码.rar

    8. 文件结构：根据压缩包中的"jsfocus"文件名，可以推测这是系统的主要JavaScript文件或文件夹，可能包含了实现图片切换功能的代码。 9. 部署与使用：在ASP.NET环境中部署启明星JS图片切换系统，可能需要将相关资源...

    多图片切换效果JavaScript实现

    本文将详细探讨如何使用JavaScript实现多图片切换效果，适用于新闻图片展示或网站焦点区域。 首先，JavaScript是一种强大的客户端脚本语言，常用于网页动态交互。在实现图片切换效果时，我们通常会利用JavaScript的...

    html+css+js实现图片切换效果

    标题中的“html+css+js实现图片切换效果”是指利用HTML、CSS和JavaScript这三种核心技术来创建一个动态的图片轮播或切换功能。在网页设计中，这种效果常见于产品展示、滑动相册或者幻灯片展示等场景，能够为用户带来...

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