图片预览效果
可通过修改CSS自定义图片预览框的大小及位置，以及边框属性；通过参数设置播放速度。
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8" />
<title>图片切换效果</title>
<style>
<!--
#idContainer {
border:solid 5px white;
width:600px;
height:440px;
overflow:hidden;
background:white;
}
-->
</style>
</head>
<body>
<div id="idContainer">
<img src="/images/large_3203o61.jpg" />
<img src="/images/large_3222p61.jpg" />
<img src="/images/large_3305m61.jpg" />
<img src="/images/large_3324c61.jpg" />
<img src="/images/large_8669l177.jpg" />
<img src="/images/large_8737f177.jpg" />
<img src="/images/large49980.jpg" />
</div>
<script type="text/javascript">
<!--
var ip = new ImagePreview("idContainer");
//-->
</script>
</body>
</html>
在<head>中插入如下JS代码：
<script type="text/javascript">
<!--
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
// 实例化一个对象并调用对象的initialize方法
var Class = {
create : function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
// 为Object添加一个extend方法
Object.extend = function(destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
return destination;
};
// 为对象注册事件
var addEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
//遍历数组
var each = function(list, fun) {
for (var i = 0; len = list.length, i < len; i++) {
fun(list[i], i);
}
};
var ImagePreview = Class.create();
ImagePreview.prototype = {
initialize : function(idContainer, options) {
var oThis = this;
this.container = $(idContainer);
this.images = this.container.getElementsByTagName("img") || {};
each(this.images, function(o) {o.style.display = "none";});
this.timer = null;
this.count = 0; // 记录当前显示第几个图片
this.setOptions(options);
this.container.style.overflow = "hidden";
this.container.style.position = "relative"; // 注意此处的定位属性必须为relative
this.width = this.container.clientWidth;
this.height = this.container.clientHeight;
this.img = document.createElement("img");
this.img.style.width = this.width + "px";
this.img.style.height = this.height + "px";
this.img.src = this.images[0].src; // 初始化时显示第一张图片
this.previewDiv = document.createElement("div");
this.previewDiv.style.position = "absolute"; // 注意此处的定位属性必须为absolute
this.previewDiv.style.left = "0px";
this.previewDiv.style.top = "0px";
this.previewDiv.appendChild(this.img);
this.previewDiv.style.filter = "progid:DXImageTransform.Microsoft.Fade(duration=1)"; // 设置滤镜
this.onPageCss = "background:green;color:red;border:2px white solid;margin-left:1px;width:15px;height:15px;font-size:12px;text-align:center;display:inline;float:left;";
this.outPageCss = "background:black;color:white;border:2px white solid;margin-left:1px;width:15px;height:15px;font-size:12px;text-align:center;display:inline;float:left;";
this.pageDiv = document.createElement("div");
this.pageDiv.style.position = "absolute"; // 注意此处的定位属性必须为absolute
this.pageDiv.style.right = "0px";
this.pageDiv.style.bottom = "0px";
this.pages = [];
for (var i = 0; i < this.images.length; i++) {
var perPageDiv = document.createElement("div");
perPageDiv.innerHTML = i + 1;
perPageDiv.style.cssText = this.outPageCss;
this.pageDiv.appendChild(perPageDiv);
this.pages.push(perPageDiv);
}
this.container.appendChild(this.previewDiv);
this.container.appendChild(this.pageDiv);
addEventHandler(oThis.previewDiv, "mouseover", function() {oThis.stop();oThis.previewDiv.style.cursor = "hand";});
addEventHandler(oThis.previewDiv, "mouseout", function() {oThis.timer = setTimeout(function() {oThis.preview();}, oThis.options.time);});
each(this.pages, function(o, i) {
addEventHandler(o, "mouseover", function() {oThis.stop();oThis.count = i;oThis.preview();o.style.cursor = "hand";});
addEventHandler(o, "mouseout", function() {oThis.stop();oThis.timer = setTimeout(function() {oThis.preview();}, oThis.options.time);});
});
this.start();
},
setOptions : function(options) {
this.options = {
time : 2000
};
Object.extend(this.options, options || {});
},
preview : function() {
var iCount = this.count;
if (iCount >= this.images.length - 1) iCount = 0;
var iImage = this.images[iCount];
this.previewDiv.filters[0].Apply(); // 对图片应用滤镜
this.img.src = iImage.src;
this.previewDiv.filters[0].play(); // 播放滤镜效果
var pages = this.pages;
for (var j = 0; j < pages.length; j++) {
var page = pages[j];
if (j == iCount) {
page.style.cssText = this.onPageCss;
} else {
page.style.cssText = this.outPageCss;
}
}
this.count = iCount + 1;
var oThis = this;
this.timer = setTimeout(function() {oThis.preview();}, this.options.time);
},
start : function() {
this.preview();
},
stop : function() {
clearTimeout(this.timer);
}
};
//-->
</script>
分享到：
相关推荐
在IT行业中，图片切换效果是网页设计和用户体验中不可或缺的一部分，尤其对于展示型网站和交互式应用来说，吸引人的图片切换能提升用户的视觉享受和浏览体验。标题“超好看的图片切换效果”暗示我们将讨论一种独特且...
本文将深入探讨如何使用JavaScript实现图片切换效果，以提升网站的用户体验。 首先，图片切换效果通常用于创建轮播图或者相册展示，这种效果能够使静态的网页内容变得生动有趣。在JavaScript中，我们可以利用DOM...
【标题】"js做的新闻图片切换效果"涉及的是JavaScript编程技术在网页动态效果中的应用，尤其是针对新闻或网站中常见的图片轮播功能。JavaScript是一种轻量级的客户端脚本语言，广泛用于网页交互和增强用户体验。在这...
在网页设计中，图片切换效果是提升用户体验的重要手段之一，特别是在产品展示、滑动轮播图等场景。本文将深入探讨“常用图片切换效果javascript”的实现原理和具体应用，主要基于描述中的“有透明效果”这一特点进行...
在网页设计中，图片切换效果是一种常见的视觉呈现方式，它能吸引用户注意力并提升用户体验。本文将详细探讨如何使用JavaScript实现多图片切换效果，适用于新闻图片展示或网站焦点区域。 首先，JavaScript是一种强大...
JavaScript图片切换效果是一种常见的网页动态展示技术，常用于制作轮播图、相册或产品展示等。这种效果可以通过JavaScript库，如jQuery，或者原生JavaScript实现。本资源"JavaScript图片切换效果.rar"提供了一个实例...
在网页设计中，图片切换效果是提升用户体验的重要手段之一，它可以吸引用户注意力并使页面更具动态感。这里我们将深入探讨标题“8种简单的图片切换效果”所涵盖的HTML、CSS和JavaScript技术，以及如何实现这些效果。...
在网页设计中，图片切换效果是一种常见的视觉呈现方式，它能吸引用户注意力并提升网站的交互体验。"Flash网页图片切换效果"是一个专为网页设计的动态图像展示技术，尤其在早期互联网时代非常流行。本知识点将深入...
在JavaScript（JS）中，实现一款漂亮的图片切换效果可以涉及多个技术点，包括DOM操作、事件处理、CSS样式控制以及动画效果的创建。下面将详细解释这些知识点。 1. **DOM操作**：在JS中，Document Object Model (DOM...
在IT行业中，图片切换效果是用户界面设计中的一个重要元素，特别是在网页、移动应用以及多媒体展示等领域。这种效果能够为用户提供动态、吸引人的视觉体验，同时有效地传递信息。本篇文章将详细探讨“带进度条说明的...
在本文中，我们将深入探讨如何使用ActionScript 3（AS3）实现各种图片切换效果，如渐变、电视墙、滴水融化、百叶窗、拉滑块和划入等。ActionScript是Adobe Flash Professional和Flex SDK中的主要编程语言，用于创建...
iphone图片切换效果
本文将详细探讨"Flash图片切换效果"这一主题，它涉及到Flash的动作脚本、时间轴控制以及图形渲染等多个方面。 Flash图片切换效果通常是指在Flash环境中通过编程或交互设计实现的一系列动态图片展示方式，比如淡入...
在网页设计中，首页焦点图片切换效果是一种常见的视觉呈现方式，它可以吸引用户的注意力并提升网站的用户体验。这种效果通常应用于网站的首页，展示重要的产品、活动或者新闻，以动态的形式吸引用户点击。在这个主题...
这个压缩包"zepto.js手机端网页上下手指滑动图片切换效果代码.zip"包含了使用zepto.js实现在手机网页上通过上下滑动手势切换图片的代码示例，同时也支持音乐播放功能，适应各种手机屏幕尺寸。 在移动设备上，触摸...
图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页
JS 图片切换效果 图片轮播 支持火狐
在实际应用中，这些效果可以通过组合使用，或者与其他CSS3特性（如响应式设计、Flexbox或Grid布局）相结合，来创造出更多富有创意的图片切换效果。在提供的压缩包中，`index.html`应该是示例代码的入口，`compass`...
"Flash图片切换效果"是指通过Flash技术实现的动态图片展示方式，它能够为网站或应用程序增添视觉吸引力，提高用户体验。本主题主要关注如何利用Flash ActionScript和XML来创建这种效果。 首先，我们来看"b11_...