<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jquery 3D分页翻转滑块 - 网页模板</title>
<meta name="description" content="Tutorial : Portfolio Flipping Slider Using jQuery & CSS3">
<meta name="author" content="Webstuffshare">
<link rel="stylesheet" href="demo.css?v=2">
<script src="javascript/modernizr.custom.34807.js"></script>
</head>
<body>
<div id="container">
<span id="information" style="display:none">Your browser doesn't support CSS3 3D Transform</span>
<h1>jquery 3D分页翻转滑块</h1>
<div id="portfolio"></div>
<ul id="portfolio-item">
<li><img src="images/dumptruck_teaser.jpeg" alt="Dump Truck" /></li>
<li><img src="images/rrwooo_rrwooo_teaser.jpeg" alt="Rrwooo" /></li>
<li><img src="images/dozer_teaser.jpeg" alt="Dozer" /></li>
<li><img src="images/ltah_teaser.jpeg" alt="Ltah" /></li>
<li><img src="images/pirates_teaser.jpeg" alt="Pirates" /></li>
<li><img src="images/rustler_teaser.jpeg" alt="Rustler" /></li>
<li><img src="images/satellite_teaser.jpeg" alt="Satellite" /></li>
<li><img src="images/werewolf_teaser.jpeg" alt="Werewolf" /></li>
<li><img src="images/box_socks_teaser.jpeg" alt="Box Socks" /></li>
<li><img src="images/capt_kidd_teaser.jpeg" alt="Capt Kidd" /></li>
<li><img src="images/bat_bedtime_teaser.jpeg" alt="Bat Bedtime" /></li>
<li><img src="images/grrr_teaser.jpeg" alt="Grrr" /></li>
<li><img src="images/eensy_teaser.jpeg" alt="Eensy" /></li>
<li><img src="images/derby_lady_teaser.jpeg" alt="Derby Lady" /></li>
<li><img src="images/carrot_teaser.jpeg" alt="Carrot" /></li>
<li><img src="images/brush_teaser.jpeg" alt="Brush" /></li>
<li><img src="images/nunatakdribbble_teaser.jpeg" alt="Nunatak" /></li>
<li><img src="images/reefdribbble_teaser.jpeg" alt="Reef" /></li>
<li><img src="images/glacier_teaser.jpeg" alt="Glacier" /></li>
<li><img src="images/carddribbble_teaser.jpeg" alt="Card" /></li>
<li><img src="images/cove_teaser.jpeg" alt="Cove" /></li>
<li><img src="images/canal_teaser.jpeg" alt="Canal" /></li>
<li><img src="images/shot_1300121080_teaser.jpeg" alt="Biome" /></li>
<li><img src="images/shot_1300969987_teaser.jpeg" alt="Globe" /></li>
<li><img src="images/bestican_teaser.jpeg" alt="Bestican" /></li>
<li><img src="images/bifocal_teaser.jpeg" alt="Bifocal" /></li>
<li><img src="images/soupsearch_teaser.jpeg" alt="Soup Search" /></li>
<li><img src="images/sub_teaser.jpeg" alt="Submarine" /></li>
<li><img src="images/tomatosoup_teaser.jpeg" alt="Tomato Soup" /></li>
<li><img src="images/harry_teaser.jpeg" alt="Hipster Harry" /></li>
<li><img src="images/for_the_man_teaser.jpeg" alt="For The Man" /></li>
<li><img src="images/extra_teaser.jpeg" alt="Indulgence" /></li>
</ul>
<nav id="navigation">
<a href="#1" class="nav selected" data-page="1">1</a>
<a href="#2" class="nav" data-page="2">2</a>
<a href="#3" class="nav" data-page="3">3</a>
<a href="#4" class="nav" data-page="4">4</a>
</nav>
</div>
<script> if(!Modernizr.csstransforms3d) document.getElementById('information').style.display = 'block'; </script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="javascript/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
<script src="javascript/demo.js"></script>
<div style="text-align:center;clear:both">
<p>适用浏览器:FireFox. 不支持IE8、360、Chrome、Safari、Opera、傲游、搜狗、世界之窗。</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>