js关闭当前页面|js同一页面可多次调用幻灯片切换效果代码

更新时间：2017-07-28 来源：js教程手机版 字体：大中小

【www.bbyears.com--js教程】

提示：您可以先修改部分代码再运行

<!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>
<title>可多次调用的图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<script language="javascript">
var $o = new Object();
$o.base = {
	e:function(a,f){
		for(var i=0,j=a.length;i<j;i++){f.call(a[i],i);}
	}
}
$o. slide = function (id,arg){
	var arg = arg||{},
	t = document.getElementById(id),
	a = t.getElementsByTagName("a"),
	lis = [],
	cl = arg.color||"#f30",
	ctm = arg.time*1000||2000,
	w = t.clientWidth,
	h = t.clientHeight,
	b = ["<ul style="margin:0;padding:0;list-style:none;display:block;position:absolute;bottom:10px;right:10px;">"],
	index = 0,
	$$ = null,
	$ = null;
	function change(i){
		if(!!$$){clearTimeout($$);}
		index = !isNaN(i)?i:index+1;
		if(index >= a.length){index = 0;}
		$o.base.e(lis,function(k){if(k == index){c(1,this);}else{c(0,this)}});
		var to = - index*h;
		if(a[0].offsetTop == to){
			return;
		}else{
			if(!!$){clearInterval($);}
			$ = setInterval(function(){
				var ot = a[0].offsetTop;
				v = Math[to<ot?"floor":"ceil"]((to - ot)*0.2);
				if(ot == to){clearInterval($);$=null;st();}
				ot += v;
				a[0].style.marginTop = ot + "px";
			},30)
		};
	}
	function c(b,o){
		o.style.backgroundColor = !!b?cl:"#fff";
		o.style.color = !!b?"#fff":cl;
	}
	function st(){
		if(!!$$)clearTimeout($$);
		$$ = setTimeout(function(){change()},ctm);
	}
	with(t.style){overflow = "hidden";position = "relative";}
	$o.base.e(a,function(n){
		this.style.display = "block";
		with(this.firstChild.style){borderWidth = "0";width = w + "px";height = h + "px";}
		b.push("<li style="width:20px;height:20px;line-height:20px;display:block;float:left;margin-left:5px;border:1px solid " + cl + "; background-color:#fff;color:" + cl +";font-size:14px;text-align:center;cursor:pointer;">" + (n+1) + "");
	});
	b.push("");
	t.innerHTML += b.join("");
	lis = t.getElementsByTagName("li");
	$o.base.e(lis,function(n){
		if(n == index){c(1,this)}
		this.onmouseover = function(){
			if(n!=index)change(n);
		}
	});
	st();
}
</script>
</head>
<body>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/wangyezhizuo/34420.html

链接：http://www.bbyears.com/wangyezhizuo/34420.html
js关闭当前页面|js同一页面可多次调用幻灯片切换效果代码(转载时请注明本文出处及链接)

猜你感兴趣

c简单读写数据到txt文件夹|C简单读写数据到txt文件实例 2017-07-28
【服务器安装windows server 2008】windows服务器删除不要服务方法 2017-07-28
基于jquery_基于jquery 高亮显示和隐藏代码 2017-07-28
关于sqlserver中统计对于查询的影响|关于SQLServer中统计对于查询的影响性能测试 2017-07-28
nginx中nginx_nginx中nginx防盗链设置和重定向规则 2017-07-28
如何让信息不显示内容_如何让网站内容更受用户青睐四要素 2017-07-28
[asp.net core]asp.net中C#委托常用地方 2017-07-28
sql存储过程写法_二个sql分页存储过程实例代码 2017-07-28
[如何改善皮肤]分析如何改善百度对网站收录 2017-07-28
【原生之罪】原生javascript选项卡菜单代码 2017-07-28

本类排行

本类最新

更多>>

js关闭当前页面|js同一页面可多次调用幻灯片切换效果代码

猜你感兴趣

热门标签

本类排行

本类最新