图片预览效果
可通过修改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>
分享到：
相关推荐
javascirpt图片切换效果 rok
超好看的图片切换效果超好看的图片切换效果超好看的图片切换效果
iphone图片切换效果
图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页
JS 图片切换效果 图片轮播 支持火狐
8中简单的图片切换效果，网页效果简单一用
网页中的图片切换效果，简单，实用。
任意多图的焦点图片切换效果...... 源码很简单,可以随意嵌套
flash图片切换效果 flash图片切换效果
一款漂亮的图片切换效果 js
JavaScript图片切换效果 演示地址：http://down.admin5.com/demo/code_pop/4/50/
图片切换效果，支持进度条说明
js实现首页焦点图片切换效果，仿大麦网首页焦点图片切换效果
纯AS3图片切换效果-包括渐变，电视墙，滴水融化，百叶窗，拉滑块，划入。
zepto.js手机端网页上下手指滑动图片切换效果代码,兼容各种手机屏幕实现音乐播放，图片上下滑动。
手机端网页上下手指滑动图片切换效果代码!
图片切换展示效果 jpg转换SWF js图片切换 flash图片切换效果 图片自动切换效果
多种js图片切换效果 js图片切换效果 图片循环切换效果
asp.net C# javascript, javascript图片切换效果asp.net C# javascript, javascript图片切换效果asp.net C# javascript, javascript图片切换效果asp.net C# javascript, javascript图片切换效果