<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>门户网站常用jQuery焦点图 - 网页模板</title>
<link href="css/zzsc.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
</head>
<body>
<div class="focusBox" style="margin:30px auto">
<ul class="pic" style="position: relative; width: 320px; height: 240px;">
<li style="position: absolute; width: 320px; left: 0px; top: 0px; display: none;"><a href="http://www.moobnn.com/" target="_blank"><img src="images/1.jpg"></a></li>
<li style="position: absolute; width: 320px; left: 0px; top: 0px; display: none;"><a href="http://www.moobnn.com/" target="_blank"><img src="images/2.jpg"></a></li>
<li style="position: absolute; width: 320px; left: 0px; top: 0px; display: list-item;"><a href="http://www.moobnn.com/" target="_blank"><img src="images/3.jpg"></a></li>
<li style="position: absolute; width: 320px; left: 0px; top: 0px; display: none;"><a href="http://www.moobnn.com/" target="_blank"><img src="images/4.jpg"></a></li>
</ul>
<div class="txt-bg"></div>
<div class="txt">
<ul>
<li style="bottom: -36px;"><a href="http://www.moobnn.com/">美女福利图Quiet</a></li>
<li style="bottom: -36px;"><a href="http://www.moobnn.com/">美女福利图DoubleLi</a></li>
<li style="bottom: 0px;"><a href="http://www.moobnn.com/">美女福利图Quiet</a></li>
<li style="bottom: -36px;"><a href="http://www.moobnn.com/">美女福利图Quiet</a></li>
</ul></div>
<ul class="num">
<li class=" "><a>1</a><span></span></li>
<li class=" "><a>2</a><span></span></li>
<li class=" on"><a>3</a><span></span></li>
<li class=" "><a>4</a><span></span></li>
</ul>
</div>
<script type="text/javascript">
jQuery(".focusBox").slide({ titCell:".num li", mainCell:".pic",effect:"fold", autoPlay:true,trigger:"click",startFun:function(i){jQuery(".focusBox .txt li").eq(i).animate({"bottom":0}).siblings().animate({"bottom":-36});}});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>