两种方式的图片切换代码

本栏首页分类：菜单导航层和布局背景特效 CSS相关文本链接表格相关日期时间图片特效页面综合广告代码表单及按钮计算转换游戏娱乐其它

两种方式的图片切换代码

标签：图片切换　时间：2012-01-03　已阅读：
两种方式的图片切换效果，通过参数可设置是否自动切换、停顿时间(微妙)、变换持续时间、变换效果（23为随机）、数据集合，如果这里不设置可以用Add方法添加、是否变换时执行等。

<!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=gb2312" />
<title>图片切换效果</title>
</head>
<body>
<style type="text/css">
.container{
	width:280px;
	height:200px;
	border:1px solid #eee;
	position:relative;
}
#idPicText{
	background:#eee;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	width:282px;
	white-space:nowrap;
	overflow:hidden;
	font-size:12px;
}
#idPicText a{
	text-decoration:none;
	color:#333;
	display:block;
}
#idPicList img{
	cursor:pointer;
	width:65px;
	height:50px;
	filter:alpha(opacity=50);
	-moz-opacity: .5;
	opacity: .5;
	border:0;
	margin:10px;
}
#idPicList img.on{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

#idNum{ position:absolute; right:5px; bottom:5px;}
#idNum li{
	float: left;
	list-style:none;
	color: #fff;
	text-align: center;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	margin: 1px;
	border: 1px solid #707070;
	background-color: #060a0b;
}
#idNum li.on{
	line-height: 18px;
	width: 18px;
	height: 18px;
	font-size: 14px;
	border: 0;
	background-color: #ce0609;
	font-weight: bold;
}

</style>
<script type="text/javascript">
var isIE = (document.all) ? true : false;

var $ = function (id) {
	return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
	create: function() {
		return function() { this.initialize.apply(this, arguments); }
	}
}

var Extend = function(destination, source) {
	for (var property in source) {
		destination[property] = source[property];
	}
}

var Bind = function(object, fun) {
	return function() {
		return fun.apply(object, arguments);
	}
}

var Each = function(list, fun){
	for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};

//ie only
var RevealTrans = Class.create();
RevealTrans.prototype = {
  initialize: function(container, options) {
	this._img = document.createElement("img");
	this._a = document.createElement("a");
	
	this._timer = null;//计时器
	this.Index = 0;//显示索引
	this._onIndex = -1;//当前索引
	
	this.SetOptions(options);
	
	this.Auto = !!this.options.Auto;
	this.Pause = Math.abs(this.options.Pause);
	this.Duration = Math.abs(this.options.Duration);
	this.Transition = parseInt(this.options.Transition);
	this.List = this.options.List;
	this.onShow = this.options.onShow;
	
	//初始化显示区域
	this._img.style.visibility = "hidden";//第一次变换时不显示红x图
	this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;
	this._img.onmouseover = Bind(this, this.Stop);
	this._img.onmouseout = Bind(this, this.Start);
	isIE && (this._img.style.filter = "revealTrans()");
	
	this._a.target = "_blank";
	
	$(container).appendChild(this._a).appendChild(this._img);
  },
  //设置默认属性
  SetOptions: function(options) {
	this.options = {//默认值
		Auto:true,//是否自动切换
		Pause:1000,//停顿时间(微妙)
		Duration:1,//变换持续时间(秒)
		Transition:23,//变换效果(23为随机)
		List:[],//数据集合,如果这里不设置可以用Add方法添加
		onShow:function(){}//变换时执行
	};
	Extend(this.options, options || {});
  },
  Start: function() {
	clearTimeout(this._timer);
	//如果没有数据就返回
	if(!this.List.length) return;
	//修正Index
	if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }
	//如果当前索引不是显示索引就设置显示
	if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }
	//如果要自动切换
	if(this.Auto){
		this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);
	}
  },
  //显示
  Show: function(list) {
	if(isIE){
		//设置变换参数
		with(this._img.filters.revealTrans){
			Transition = this.Transition; Duration = this.Duration; apply(); play();
		}
	}
	this._img.style.visibility = "";
	//设置图片属性
	this._img.src = list.img; this._img.alt = list.text;
	//设置链接
	!!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");
	//附加函数
	this.onShow();
  },
  //添加变换对象
  Add: function(sIimg, sText, sUrl) {
	this.List.push({ img: sIimg, text: sText, url: sUrl });
  },
  //停止
  Stop: function() {
	clearTimeout(this._timer);
  }
};
</script>
<div id="idShow" class="container">
</div>

//添加变换对象
r.Add('/jscss/demoimg/wall1.jpg', '图片变换效果', '#');
r.Add('/jscss/demoimg/wall2.jpg', '图片滑动展示效果', '#');
r.Add('/jscss/demoimg/wall3.jpg', '图片切换展示效果', '#');
r.Start();

//////////////////////

var rvt = new RevealTrans("idPicShow");

//添加变换对象
rvt.Add('/jscss/demoimg/wall1.jpg', '图片变换效果', '#');
rvt.Add('/jscss/demoimg/wall2.jpg', '图片滑动展示效果', '#');
rvt.Add('/jscss/demoimg/wall3.jpg', '图片切换展示效果', '#');

var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];
var oNum = $("idNum"), arrNum = [];

//设置图片列表
Each(rvt.List, function(list, i){
	//图片式
	var img = document.createElement("img");
	img.src = list["img"]; img.alt = list["text"];
	arrImg[i] = img;
	oList.appendChild(img);
	//按钮式
	var li = document.createElement("li");
	li.innerHTML = i + 1;
	arrNum[i] = li;
	oNum.appendChild(li);
	//事件设置
	img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
	img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
});

//设置图片列表样式 文本显示区域
rvt.onShow = function(){
	var i = this.Index, list = this.List[i];
	//图片式
	Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";
	//按钮式
	Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
	//文本区域
	oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;
}

//文本显示区域
oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };
oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
rvt.Start();
</script>
</body>
</html>

两种方式的图片切换代码

本类推荐代码

本类阅读排行

最新源码下载