图片幻灯效果

最新推荐文章于 2022-02-25 23:02:56 发布

liudaoru

最新推荐文章于 2022-02-25 23:02:56 发布

阅读量97

点赞数

分类专栏： Ajax 文章标签： prototype C C++ C# HTML

Ajax 专栏收录该内容

158 篇文章 0 订阅

订阅专栏

<!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" οnmοuseοver="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>

liudaoru

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片幻灯效果

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=GB18030"&gt;&lt;title&gt;X
复制链接

扫一扫

专栏目录