dirts/photo.html

## photo.html
<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	<style type="text/css">
	body ,div ,ul,li {margin:0;padding:0};
	li{list-style-type: none;}
	.mid { width:200px;height:100px;border: 2px solid #ccc;position: relative; margin:0 auto;margin-top:10px;overflow: hidden;}
	.mid ul.list {display: inline-block;position:absolute;top:0px;left:0px;}
	.mid ul.list li {float:left;width:200px;height:100px; -position: absolute; list-style-type: none;}
	.mid ul.list li img {width:200px;height:100px;}
	#mid ul.list li {position: absolute;}
	.mid .title { position: absolute;bottom:0px;left:0px; width:200px;height:18px;line-height: 18px;background:#000;  opacity: 0.5;-moz-opacity: 0.5;filter:alpha(opacity=5);z-index:290}
	.mid .title a {margin:0 5px 0 5px;color:#fff;text-decoration: none; font-size:9px}

	.mid ul.menu {display: inline-block;position: absolute;bottom:4px;right:0px;z-index: 299}
	.mid ul.menu li {width:10px;height:10px;background:#ccc;float:left;margin-right:1px;text-indent: -99999px;cursor:pointer}
	.mid ul.menu li.Cur a {background:#f00;width:10px;height:10px;display: block;}

	#lite {margin:0 auto;margin-top:10px;width:200px;height:22px;position: relative;border:1px solid #ccc;overflow: hidden;}
	#lite ul {display: inline-block;position: absolute;}
	#lite ul li {width:200px;float: left;font-size:10px;line-height:22px;}
	</style>
	<div class="mid" style="height:15px;line-height:15px">
		<a href="javascript:;" id="prve"><</a><a href="javascript:;" id="next">></a>
	</div>
<div class="mid" id="mid">
	<ul class="list">
		<li a="1"><img src="1.jpg" alt="" /></li>
		<li a="2"><img src="2.jpg" alt="" /></li>
		<li a="3"><img src="3.jpg" alt="" /></li>
		<li a="4"><img src="4.jpg" alt="" /></li>
	</ul>
	<ul class="menu">
		<li><a href="#1" tit="t1">1</a></li>
		<li><a href="#2" tit="t2">1</a></li>
		<li><a href="#3" tit="t3">1</a></li>
		<li><a href="#4" tit="t4">1</a></li>
	</ul>
	<div id="t1" class="title"><a href=""></a></div>
</div>

<div class="mid" id="mid2">
	<ul class="list">
		<li a="1"><img src="1.jpg" alt="" /></li>
		<li a="2"><img src="2.jpg" alt="" /></li>
		<li a="3"><img src="3.jpg" alt="" /></li>
		<li a="4"><img src="4.jpg" alt="" /></li>
	</ul>
	<ul class="menu">
		<li><a href="#1" tit="t1">1</a></li>
		<li><a href="#2" tit="t2">1</a></li>
		<li><a href="#3" tit="t3">1</a></li>
		<li><a href="#4" tit="t4">1</a></li>
	</ul>
	<div id="t2" class="title"><a href=""></a></div>
</div>


<div class="mid" id="mid3">
	<ul class="list">
		<li a="1"><img src="1.jpg" alt="" /></li>
		<li a="2"><img src="2.jpg" alt="" /></li>
		<li a="3"><img src="3.jpg" alt="" /></li>
		<li a="4"><img src="4.jpg" alt="" /></li>
	</ul>
	<ul class="menu">
		<li><a href="#1" tit="t1">1</a></li>
		<li><a href="#2" tit="t2">1</a></li>
		<li><a href="#3" tit="t3">1</a></li>
		<li><a href="#4" tit="t4">1</a></li>
	</ul>
	<div id="t3" class="title"><a href=""></a></div>
</div>


<div id="lite">
	<ul>
		<li>1.开岛</li>
		<li>2.小王八煮白蛋</li>
		<li>3.你好的哇</li>
	</ul>
</div>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
//Phototype.news({  'id' : 'mid' , 'pattern' : 'up' , 'interval' : 5 }):
Phototype.news({ id:'mid', title : 't1' , pattern : 'fade', next : 'next' , prve : 'prve' , interval : 10 });
Phototype.news({ id:'mid2', title : 't2' , pattern:'up', interval:10 });
Phototype.news({ id:'mid3', title : 't3' , pattern:'left', interval:10 });
Phototype.news({ id:'lite', pattern:'up', interval:10 ,next : 'next' , prve : 'prve' , loop : true});

</script>
</body>
</html>
	<!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" xml:lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	</head>
	<body>
	<style type="text/css">
	body ,div ,ul,li {margin:0;padding:0};
	li{list-style-type: none;}
	.mid { width:200px;height:100px;border: 2px solid #ccc;position: relative; margin:0 auto;margin-top:10px;overflow: hidden;}
	.mid ul.list {display: inline-block;position:absolute;top:0px;left:0px;}
	.mid ul.list li {float:left;width:200px;height:100px; -position: absolute; list-style-type: none;}
	.mid ul.list li img {width:200px;height:100px;}
	#mid ul.list li {position: absolute;}
	.mid .title { position: absolute;bottom:0px;left:0px; width:200px;height:18px;line-height: 18px;background:#000; opacity: 0.5;-moz-opacity: 0.5;filter:alpha(opacity=5);z-index:290}
	.mid .title a {margin:0 5px 0 5px;color:#fff;text-decoration: none; font-size:9px}

	.mid ul.menu {display: inline-block;position: absolute;bottom:4px;right:0px;z-index: 299}
	.mid ul.menu li {width:10px;height:10px;background:#ccc;float:left;margin-right:1px;text-indent: -99999px;cursor:pointer}
	.mid ul.menu li.Cur a {background:#f00;width:10px;height:10px;display: block;}

	#lite {margin:0 auto;margin-top:10px;width:200px;height:22px;position: relative;border:1px solid #ccc;overflow: hidden;}
	#lite ul {display: inline-block;position: absolute;}
	#lite ul li {width:200px;float: left;font-size:10px;line-height:22px;}
	</style>
	<div class="mid" style="height:15px;line-height:15px">
	<a href="javascript:;" id="prve"><</a><a href="javascript:;" id="next">></a>
	</div>
	<div class="mid" id="mid">
	<ul class="list">
	<li a="1"><img src="1.jpg" alt="" /></li>
	<li a="2"><img src="2.jpg" alt="" /></li>
	<li a="3"><img src="3.jpg" alt="" /></li>
	<li a="4"><img src="4.jpg" alt="" /></li>
	</ul>
	<ul class="menu">
	<li><a href="#1" tit="t1">1</a></li>
	<li><a href="#2" tit="t2">1</a></li>
	<li><a href="#3" tit="t3">1</a></li>
	<li><a href="#4" tit="t4">1</a></li>
	</ul>
	<div id="t1" class="title"><a href=""></a></div>
	</div>

	<div class="mid" id="mid2">
	<ul class="list">
	<li a="1"><img src="1.jpg" alt="" /></li>
	<li a="2"><img src="2.jpg" alt="" /></li>
	<li a="3"><img src="3.jpg" alt="" /></li>
	<li a="4"><img src="4.jpg" alt="" /></li>
	</ul>
	<ul class="menu">
	<li><a href="#1" tit="t1">1</a></li>
	<li><a href="#2" tit="t2">1</a></li>
	<li><a href="#3" tit="t3">1</a></li>
	<li><a href="#4" tit="t4">1</a></li>
	</ul>
	<div id="t2" class="title"><a href=""></a></div>
	</div>


	<div class="mid" id="mid3">
	<ul class="list">
	<li a="1"><img src="1.jpg" alt="" /></li>
	<li a="2"><img src="2.jpg" alt="" /></li>
	<li a="3"><img src="3.jpg" alt="" /></li>
	<li a="4"><img src="4.jpg" alt="" /></li>
	</ul>
	<ul class="menu">
	<li><a href="#1" tit="t1">1</a></li>
	<li><a href="#2" tit="t2">1</a></li>
	<li><a href="#3" tit="t3">1</a></li>
	<li><a href="#4" tit="t4">1</a></li>
	</ul>
	<div id="t3" class="title"><a href=""></a></div>
	</div>


	<div id="lite">
	<ul>
	<li>1.开岛</li>
	<li>2.小王八煮白蛋</li>
	<li>3.你好的哇</li>
	</ul>
	</div>
	<script type="text/javascript" src="1.js"></script>
	<script type="text/javascript">
	//Phototype.news({ 'id' : 'mid' , 'pattern' : 'up' , 'interval' : 5 }):
	Phototype.news({ id:'mid', title : 't1' , pattern : 'fade', next : 'next' , prve : 'prve' , interval : 10 });
	Phototype.news({ id:'mid2', title : 't2' , pattern:'up', interval:10 });
	Phototype.news({ id:'mid3', title : 't3' , pattern:'left', interval:10 });
	Phototype.news({ id:'lite', pattern:'up', interval:10 ,next : 'next' , prve : 'prve' , loop : true});

	</script>
	</body>
	</html>