<!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=utf-8" />
<title>jquery实现从不同角度滑入滑出的banner焦点图</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/lanrenzhijia.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="css/lanrenzhijia.css" type="text/css">
</head>
<body>
<div class="banner">
<div id="banner-index-loading">
<div class="banner-index">
<div class="frame960 relative">
<div class="banner-img absolute">
<div class="relative">
<div class="leftimg left1" moveinderection="7" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="7" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic" style="left: -460px; top: 0px; z-index: 0; opacity: 0; "> <img src="images/01字.png" alt="官网上线"></div>
<div class="rightimg right1" moveinderection="3" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="3" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic" style="left: 460px; top: 0px; z-index: 0; opacity: 0; "> <img src="images/01.png" alt="官网上线"> </div>
<div class="leftimg left2" moveinderection="8" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="4" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic" style="z-index: 9999; left: 0px; top: 0px; opacity: 1; "><a href="http://www.jb51.net/" title="赢家服饰品牌网站建设"><img src="images/02字.png" alt="赢家服饰品牌网站建设"></a></div>
<div class="rightimg right2" moveinderection="4" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="4" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic" style="z-index: 9999; left: 0px; top: 0px; opacity: 1; "> <a target="_blank" href="http://www.jb51.net/" title="赢家服饰品牌网站建设"><img src="images/02.png" alt="赢家服饰品牌网站建设"></a></div>
<div class="leftimg left3" moveinderection="3" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="3" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a href="http://www.mulandesign.com/cases/84.html" title="万科网络电视台官网建设"> <img src="images/03字体左.png" alt="万科网络电视台官网建设"> </a> </div>
<div class="rightimg right3" moveinderection="7" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="7" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a target="_blank" href="http://www.jb51.net/" title="万科网络电视台官网建设"><img src="images/03.png" alt="万科网络电视台官网建设"> </a> </div>
<div class="leftimg left4" moveinderection="6" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="2" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a href="http://www.mulandesign.com/cases/62.html" title="朵唯手机品牌网站建设"><img src="images/05字.png" alt="朵唯手机品牌网站建设"> </a> </div>
<div class="rightimg right4" moveinderection="2" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="2" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a target="_blank" href="http://www.jb51.net/" title="朵唯手机品牌网站建设"><img src="images/05.png" alt="朵唯手机品牌网站建设"> </a> </div>
<div class="leftimg left5" moveinderection="3" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="7" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a href="http://www.jb51.net/" title="面点王品牌网站改版"><img src="images/04字.png" alt="面点王品牌网站改版"> </a> </div>
<div class="rightimg right5" moveinderection="7" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="7" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a target="_blank" href="http://www.jb51.net/" title="面点王品牌网站改版"><img src="images/04.png" alt="面点王品牌网站改版"> </a></div>
<div class="leftimg left6" moveinderection="2" moveinspeed="1700" moveintype="linear" fadeinspeed="500" fadeintype="linear" moveoutderection="6" moveoutspeed="1000" moveouttype="linear" fadeoutspeed="500" fadeouttype="linear"> <a href="http://www.mulandesign.com/cases/94.html" title="华大基因TV网站设计"> <img src="images/06字.png" alt="华大基因TV网站设计"></a> </div>
<div class="rightimg right6" moveinderection="6" moveinspeed="1700" moveintype="linear" fadeinspeed="500" fadeintype="linear" moveoutderection="2" moveoutspeed="1000" moveouttype="linear" fadeoutspeed="500" fadeouttype="linear"> <a target="_blank" href="http://www.jb51.net/" title="华大基因TV网站设计"> <img src="images/06.png" alt="华大基因TV网站设计"> </a> </div>
<div class="leftimg left7" moveinderection="8" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="4" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a href="http://www.jb51.net/" title="扬智科技品牌网站制作"><img src="images/07字.png" alt="扬智科技品牌网站制作"></a></div>
<div class="rightimg right7" moveinderection="4" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="8" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a target="_blank" href="http://www.jb51.net/" title="扬智科技品牌网站制作"><img src="images/07.png" alt="扬智科技品牌网站制作"></a> </div>
</div>
</div>
<ul class="banner-bt absolute">
<li><a class="pointer" target="1"><span class="ico" style="background-image: url('images/01L.png')"></span></a></li>
<li><a class="pointer active" target="2"><span class="ico" style="background-image: url('images/02L.png')"></span></a></li>
<li><a class="pointer" target="3"><span class="ico" style="background-image: url('images/03L.png')"></span></a></li>
<li><a class="pointer" target="4"><span class="ico" style="background-image: url('images/05L.png')"></span></a></li>
<li><a class="pointer" target="5"><span class="ico" style="background-image: url('images/04L.png')"></span></a></li>
<li><a class="pointer" target="6"><span class="ico" style="background-image: url('images/06L.png')"></span></a></li>
<li><a class="pointer" target="7"><span class="ico" style="background-image: url('images/07L.png')"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
jquery实现从不同角度滑入滑出的左右全屏banner.zip （26个子文件） 
132677868068919790 css 
lanrenzhijia.css 3KB images 
02字.png 24KB 07L.png 4KB 06字.png 24KB 03L.png 5KB 04.png 258KB 02L.png 4KB 01.png 178KB 05L.png 4KB 07.png 177KB 04字.png 20KB 01字.png 18KB 06L.png 4KB 04L.png 5KB 02.png 176KB 05字.png 22KB 06.png 203KB 07字.png 25KB 01L.png 5KB 03.png 304KB 03字体左.png 17KB 05.png 177KB
index.html 8KB js jquery.js 92KB lanrenzhijia.js 37KB jquery.easing.1.3.js 8KB资源评论
