jQuery 3D分页翻转滑块
<!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="https://www.jq22.com/demo/jquery3dfyhk202209132312/demo.css?v=2">
<script src="https://www.jq22.com/demo/jquery3dfyhk202209132312/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="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/dumptruck_teaser.png" alt="Dump Truck" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/rrwooo_rrwooo_teaser.png" alt="Rrwooo" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/dozer_teaser.png" alt="Dozer" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/ltah_teaser.png" alt="Ltah" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/pirates_teaser.png" alt="Pirates" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/rustler_teaser.png" alt="Rustler" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/satellite_teaser.png" alt="Satellite" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/werewolf_teaser.png" alt="Werewolf" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/box_socks_teaser.png" alt="Box Socks" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/capt_kidd_teaser.png" alt="Capt Kidd" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/bat_bedtime_teaser.png" alt="Bat Bedtime" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/grrr_teaser.png" alt="Grrr" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/eensy_teaser.png" alt="Eensy" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/derby_lady_teaser.png" alt="Derby Lady" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/carrot_teaser.png" alt="Carrot" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/brush_teaser.png" alt="Brush" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/nunatakdribbble_teaser.png" alt="Nunatak" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/reefdribbble_teaser.png" alt="Reef" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/glacier_teaser.png" alt="Glacier" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/carddribbble_teaser.png" alt="Card" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/cove_teaser.png" alt="Cove" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/canal_teaser.png" alt="Canal" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/shot_1300121080_teaser.png" alt="Biome" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/shot_1300969987_teaser.png" alt="Globe" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/bestican_teaser.png" alt="Bestican" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/bifocal_teaser.png" alt="Bifocal" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/soupsearch_teaser.png" alt="Soup Search" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/sub_teaser.png" alt="Submarine" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/tomatosoup_teaser.png" alt="Tomato Soup" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/harry_teaser.png" alt="Hipster Harry" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/for_the_man_teaser.png" alt="For The Man" /></li>
<li><img src="https://www.jq22.com/demo/jquery3dfyhk202209132312/images/extra_teaser.png" 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 src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/jquery3dfyhk202209132312/javascript/demo.js"></script>
</body>
</html>
页:
[1]