`
liudaoru
  • 浏览: 1588337 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

图片幻灯效果

    博客分类：
  • Ajax
prototypeCC++C#HTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Xinhua Space</title>
<script type="text/javascript">
/**
 * 图片切换组件
 *
 * (c) 2008 Beijing TRS info corp
 * @author: liudaoru
 */
var ImgM = function() {
	var $ = function(sid) {
		return document.getElementById(sid);
	};
	//---------------  封装stringBuffer对象，可以节省字符串拼接的开销  ---------------
	function StringBuffer() {
		this._strings_ = new Array();
	}
	StringBuffer.prototype.append = function (str) {
		this._strings_.push(str);
	};
	StringBuffer.prototype.toString = function () {
		var str = this._strings_.join("");
		delete this._strings_;
		this._strings_ = new Array();
		return str;
	};
	//-------------------------------------------------------------------------------
	var imgObjs = []; //图片对象数组
	var HIGH_LIGHT_BG = "#f0f000"; //高亮样式
	var NORMAL_BG = ""; //普通样式
	var addItem = function(title, src, link) { //构造图片对象，并放入数组
		imgObjs.push({title: title, src:src, link:link});
	};
	//展示图片
	var show = function() {
		if(imgObjs.length == 0) { //如果没有图片则返回
			return false;
		}
		displayBig(imgObjs[0]); //展示第一幅图
		var sb = new StringBuffer();
		var padStyle = "";
		for(var i = 0; i < imgObjs.length; i++) {
			if(i > 0) {
				padStyle = ' style="padding-top:8px;" ';
			} else {
				padStyle = '';
			}
			sb.append('<a class=img_lit_con href="' + imgObjs[i].link + '" target="_blank" ' + padStyle + ' id="img_lit_c_' + i + '"><img src="' + imgObjs[i].src + '" border=0 class="img_lit" onmouseover="ImgM.shift(' + i + ', event);" /></a>');
		}
		$("img_icon_con").innerHTML = sb.toString();
		$("img_lit_c_0").style.background = HIGH_LIGHT_BG;
	};
	var OLD_INDEX = 0;
	//切换图片
	var shift = function(index, evt) {
		index = parseInt(index);
		$("img_lit_c_" + OLD_INDEX).style.background = NORMAL_BG;
		OLD_INDEX = index;
		var target = window.event? window.event.srcElement : evt.target;
		if(target.tagName.toLowerCase() == "img") {
			target = target.parentNode;
		}
		if(target) {
			target.style.background = HIGH_LIGHT_BG;
		}
		if (document.all) {
			var imgBig = $("img_big_obj");
			imgBig.filters.revealTrans.transition = Math.floor((Math.random() * 23));
			imgBig.filters.revealTrans.Apply();
		}
		displayBig(imgObjs[index]); //
		if (document.all) {
			imgBig.filters.revealTrans.Play(2);
		}
	};
	//展示大图图片
	var displayBig = function(imgObj) {
		var imgBigObj = $('img_big_obj'); 
		if(!imgBigObj) {
			$("img_big").innerHTML = '<a href="' + imgObj.link + '" target="_blank"><img id="img_big_obj" src="' + imgObj.src + '" style="filter:revealTrans(duration=1,transition=12);" border=0 /></a>'; //展示大图
		} else {
			imgBigObj.src = imgObj.src;
			imgBigObj.parentNode.href = imgObj.link;
		}
		$("img_info").innerHTML = imgObj.title;
	};
	//初始化函数
	var init = function() {
		//添加url路径
		addItem("第一幅图片", "http://misc.home.news.cn/photo/public/vd1/200805/23/b8/PHfs012008052321460150b8b25e_O.jpeg", "http://www.trs.com.cn/");
		addItem("第二幅图片", "http://misc.home.news.cn/photo/public/vd1/200805/21/01/PHfs01200805211651545001cbaa_O.jpg", "http://www.baidu.com/");
		addItem("第三幅图片", "http://misc.home.news.cn/photo/public/vd1/200805/20/00/PHfs01200805202333525000b990_O.jpg", "http://www.google.com/");
		addItem("第四幅图片", "http://misc.home.news.cn/photo/public/vd1/200806/05/46/PHfs01200806051255195046e174_O.jpg", "http://www.news.cn/");
		
		//预加载图片，并展示图片
		for(var i = imgObjs.length - 1; i >=0; i--) {
			(new Image()).src = imgObjs[i].src;
		}
	};
	//执行初始化
	init();
	//
	return {show:show, shift:shift};
}(); //ImgM
//267*184
//22px
//58*40
</script>
<style>  
/* 我拍奥运 begin */
div {padding:0px;margin:0px;}
#img_con {width:345px;height:184px;border:1px solid #0099ff;} /* 外部容器样式 */
#img_big_con {float:left;width:267px;height:100%;}
#img_icon_con {float:left;}
.img_lit_con {display:block;padding-left:8px;}/* 小图容器 */
.img_lit {width:58px;height:40px;cursor:pointer;}/* 小图 */
#img_big_obj {width:267px;height:184px;}/* 大图 */

#img_info_mask, #img_info {position:absolute;left:0px;bottom:0px;width:100%;height:22px;}
#img_info_mask {z-index:101;background:#c0c0c0;filter:alpha(opacity=40);opacity:0.4;}/* alpha层 */
#img_info {z-index:102;text-align:center;color:#fff;font:600 12px;line-height:22px;}/* 简介 */
/* 我拍奥运 end */
</style>
</head>
<body>
<div id="img_con">
	<div id="img_big_con" style="position:relative;">
		<div id="img_info_mask"> </div>
		<div id="img_info"></div>
		<div id="img_big"></div>
	</div>
	<div id="img_icon_con"></div>
	<div style="clear:both;display:none;"> </div>
</div>
</body>
</html>
<script>
ImgM.show();
</script>

 

分享到：
| 简单蚁群算法的实现[z]
评论
2 楼 liudaoru 2008-07-24  
html部分代码： 
<div style="position:relative;">
						<div id="img_info_mask">&nbsp;</div>
						<div id="img_info"></div>
				     	<div id="img_con">
						<div id="img_big_con" style="position:relative;">
							<div id="img_big"></div>
						</div>
						<div id="img_icon_con"></div>
						<div style="clear:both;display:none;">&nbsp;</div>
				</div>
				</div>
1 楼 liudaoru 2008-07-24  
包含幻灯包访的版本： 
/**
 * 图片切换组件
 */
var ImgM = function() {
	var $ = function(sid) {
		return document.getElementById(sid);
	};
	//---------------  封装stringBuffer对象，可以节省字符串拼接的开销  ---------------
	function StringBuffer() {
		this._strings_ = new Array();
	}
	StringBuffer.prototype.append = function (str) {
		this._strings_.push(str);
	};
	StringBuffer.prototype.toString = function () {
		var str = this._strings_.join("");
		delete this._strings_;
		this._strings_ = new Array();
		return str;
	};
	//-------------------------------------------------------------------------------
	var imgObjs = []; //图片对象数组
	var CUR_INDEX = 0; //记录当前序号
	var INIT_TOP = -1;	//初始top
	var ANTIMATE_STOP = false; //动画是否停止播放
	var addItem = function(title, src, link) { //构造图片对象，并放入数组
		imgObjs.push({title: title, src:src, link:link});
	};
	//展示图片
	var show = function() {
		if(imgObjs.length == 0) { //如果没有图片则返回
			return false;
		}
		displayBig(imgObjs[0]); //展示第一幅图
		var sb = new StringBuffer();
		var padStyle = "";
		for(var i = 0; i < imgObjs.length; i++) {
			if(i > 0) {
				padStyle = ' style="padding-top:8px;" ';
			} else {
				padStyle = '';
			}
			sb.append('<a class=img_lit_con href="' + imgObjs[i].link + '" target="_blank" ' + padStyle + ' id="img_lit_c_' + i + '"><img src="' + imgObjs[i].src + '" border=0 class="img_lit" onmouseover="ImgM.stopAntimate();ImgM.shift(' + i + ');" /></a>');
		}
		sb.append('<a id="img_cur" href="' + imgObjs[0].link + '" onmouseout="ImgM.startAntimate();" style="top:' + INIT_TOP + 'px;"></a>');
		$("img_icon_con").innerHTML = sb.toString();
		setInterval("ImgM.shiftAntimate()", 5000); //启动自动切换
	};
	//自动切换图片
	var shiftAntimate = function() {
		if(!ANTIMATE_STOP) {//循环播放
			shift((CUR_INDEX + 1)%4);
		} 
	};
	//重新开始动画
	var startAntimate = function() {
		ANTIMATE_STOP = false;
	};
	//停止动画
	var stopAntimate = function() {
		ANTIMATE_STOP = true;
	};
	//切换图片
	var shift = function(index) {
		index = parseInt(index);
		if(CUR_INDEX == index) {
			return false;//没有变化
		}
		moveCurMark(index, CUR_INDEX);
		if (document.all) {
			var imgBig = $("img_big_obj");
			imgBig.filters.revealTrans.transition = Math.floor((Math.random() * 23));
			imgBig.filters.revealTrans.Apply();
		}
		displayBig(imgObjs[index]); //
		$("img_cur").href = imgObjs[index].link;
		if (document.all) {
			imgBig.filters.revealTrans.Play(1);
		}
		CUR_INDEX = index;
	};
	//调整标注当前的图片的位置
	var moveCurMark = function(index, cur_index) {
		var curTop = INIT_TOP + cur_index * 48;
		var endTop = INIT_TOP + index * 48;
		var timer = 40;
		var step = (endTop - curTop) / 8;
		doMove(curTop, endTop, step, timer);
	};
	//移动动画, curTop: 当前高度, endTop：最终高度,timer: 时钟间隔
	var doMove = function(curTop, endTop, step, timer) {
		var obj = $("img_cur");
		curTop = curTop + step;
		obj.style["top"] = curTop + "px";
		if(curTop != endTop) {
			setTimeout("ImgM.doMove(" + curTop + ", " + endTop + ", " + step + ", " + timer + ")", timer);
		}
	};
	//展示大图图片
	var displayBig = function(imgObj) {
		var imgBigObj = $('img_big_obj'); 
		if(!imgBigObj) {
			$("img_big").innerHTML = '<a href="' + imgObj.link + '" target="_blank"><img id="img_big_obj" onmouseover="ImgM.stopAntimate();" onmouseout="ImgM.startAntimate();" src="' + imgObj.src + '" style="filter:revealTrans(duration=1,transition=12);" border=0 /></a>'; //展示大图
		} else {
			imgBigObj.src = imgObj.src;
			imgBigObj.parentNode.href = imgObj.link;
		}
		$("img_info").innerHTML = imgObj.title;
		delete imgObj;
	};
	//初始化函数
	var init = function(initImgStr) {
		var imgStrs = initImgStr.split("|"), imgStr, imgParams;
		if(imgStrs.length == 0) {
			return false;
		}
		for(var i = 0; i < imgStrs.length; i++) {
			imgStr = imgStrs[i];
			imgParams = imgStr.split("!");
			addItem(imgParams[0], imgParams[1], imgParams[2]);
		}
		
		//预加载图片，并展示图片
		for(var i = imgObjs.length - 1; i >=0; i--) {
			(new Image()).src = imgObjs[i].src;
		}
	};
	//执行初始化
	init(WPAY_IMG_STR);
	//
	return {show:show, shift:shift, doMove:doMove, shiftAntimate:shiftAntimate, startAntimate:startAntimate, stopAntimate:stopAntimate};
}(); //ImgM
发表评论

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

相关推荐

    jquery图片幻灯效果

    jQuery 图片幻灯效果是一种常见的网页动态展示技术，它能够以滑动、淡入淡出等方式自动切换网页上的多张图片，为用户带来流畅且吸引人的视觉体验。在网页设计和开发中，jQuery 被广泛用于实现这种交互式功能，因为它...

    凤凰网网易图片幻灯效果

    标题中的“凤凰网网易图片幻灯效果”指的是在网页设计中常见的图像展示技术，通常用于新闻网站、博客或者产品展示页面，以吸引用户注意力并提供视觉上的动态体验。这种技术通过编程实现图片的自动轮播，结合缩略图和...

    疯狂的IT人整理的Javascript图片幻灯效果

    "疯狂的IT人整理的Javascript图片幻灯效果"是这个资源集合的核心主题，这意味着我们将探讨如何利用JavaScript实现图片轮播，一种常见的网页动态展示方式。 图片幻灯效果，也称为图片滑动展示或轮播图，是网页设计中...

    图片幻灯效果（JS）

    在网页设计中，图片幻灯效果是一种常见的动态展示方式，用于吸引用户注意力并优雅地呈现一系列图片或内容。本文将深入探讨如何使用JavaScript实现这样的效果，以及相关的关键知识点。 首先，JavaScript是网页开发中...

    鼠标放在缩略图上面显示大图——ppt图片幻灯效果模板.rar

    "鼠标放在缩略图上面显示大图——ppt图片幻灯效果模板.rar" 是一个专门设计用于实现这一功能的资源文件。这个压缩包提供了一个预设的PowerPoint模板，允许用户在鼠标悬停于缩略图时，自动展示对应的大图，从而增加...

    Javascript打造带数字自动播放的图片幻灯效果

    Javascript打造带数字自动播放的图片幻灯效果

    可显示三维视图的CSS3图片幻灯效果.rar

    可显示三维视图的CSS3图片幻灯效果，本效果主要是响应鼠标的动作，可改变图片显示的角度，有种三维空间感，每张播放的图片，均可显示图片描述、当前进度标示等，下边的小方格，会标注出当前播放的图片位置。...

    web页面图片幻灯片播放效果（相册）源码

    网页图片幻灯片播放效果，通常被称为图片轮播或相册功能，是Web开发中一个常见且实用的设计元素。这种效果使得多张图片能够在有限的空间内以动态的方式展示，为用户带来良好的交互体验。在本案例中，"web页面图片...

    asp.net 图片幻灯片切换

    在这个特定的场景中，我们关注的是如何在ASP.NET中实现图片幻灯片切换的功能。 图片幻灯片切换通常用于网站的首页或者产品展示页面，它可以自动或手动切换展示一系列的图片，为用户提供动态且吸引人的视觉体验。...

    asp图片切换幻灯特效代码

    CSS用于控制幻灯片的外观，包括图片的尺寸、位置、过渡效果等。例如，我们可以设定图片初始隐藏，然后通过JavaScript激活显示： ```css .slide { display: none; } .active { display: block; } ``` 三、...

    图片幻灯片效果

    在IT领域，图片幻灯片效果是一种常见的用户体验设计，它允许用户以动态的方式浏览一系列图片，就像真实的幻灯片展示一样。这种效果广泛应用于网站、应用程序、桌面软件以及各种多媒体项目中，为用户提供了一种优雅且...

    静态网页图片幻灯制作软件

    - **QtWebKit4.dll**：这是Qt的Web渲染引擎模块，用于解析和显示HTML内容，可能在软件中用于预览和编辑网页中的图片幻灯效果。 - **QtGui4.dll**：提供了图形用户界面的基本元素，如窗口、按钮、文本框等，是构建...

    图片幻灯显示效果web页面源代码

    在网页设计中，图片幻灯显示是一种常见的交互效果，它能以动态的形式展示一组图片，增强用户体验。"图片幻灯显示效果web页面源代码"是一个关于如何使用CSS和JavaScript实现这种效果的示例项目。接下来，我们将深入...

    超酷国外图片幻灯切换效果代码(html代码,javascript)

    在网页设计中，图片幻灯切换效果是一种常见的视觉呈现方式，它可以吸引用户的注意力，增加页面的动态感。本文将深入探讨“超酷国外图片幻灯切换效果代码”，它结合了HTML和JavaScript技术，为用户提供了一种高效且...

    图片幻灯片效果HTML代码coding

    在网页设计中，图片幻灯片效果是一种常见的视觉呈现方式，它允许用户通过滑动或自动切换来浏览一组相关的图片。这种效果可以增加网站的吸引力，尤其适用于展示产品、服务或者作为背景装饰。本篇文章将深入探讨如何...

    一个网页图片的幻灯效果代码

    网页图片的幻灯效果是一种常见的网页动态展示技术，它能够以自动播放或手动切换的方式展示一组图片，为网站增加视觉吸引力。在本案例中，提到的“幻灯效果代码”是基于“dede”代码实现的，这可能指的是DEDECMS...

    幻灯片-更换图片效果-网页效果

    本主题聚焦于“幻灯片-更换图片效果-网页效果”，这涉及到动态展示图片的技术，常见于网站的首页或者产品展示区域，用于吸引用户注意力，呈现多样的内容。在给定的文件列表中，我们有以下几个关键文件： 1. **pic....

    图片展示-幻灯片效果，qq图片效果（js实现）

    ---图片以幻灯片的风格展示，效果有：a,可以在幻灯片中添加标题。 b,在幻灯片添加超链接实现在不同的幻灯片之间切换。c，产品的展示形式。（类似淘宝）。 d,标准的幻灯片播放形式。 3，仿QQ相册幻灯片 --模仿QQ中...

    jquery图片幻灯片

    在网页设计中，jQuery图片幻灯片是一种常见且实用的元素，它能够为网站增添动态效果，提升用户体验。jQuery库的轻量级和强大的API使其成为实现这种功能的理想选择。本篇文章将深入探讨jQuery图片幻灯片的工作原理、...

    纯CSS3图片幻灯片切换效果

    首先真的非常感谢世界上有了CSS3这么个东西，它使得很多网页特效不再需要依赖javascript脚本代码，使得浏览器执行起来更加方便快捷。...  2、图片切换的效果可以自我控制；  3、自定义开始结束位置；

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