Created
February 27, 2012 12:44
-
-
Save cherenkov/1923479 to your computer and use it in GitHub Desktop.
Featured Content Slider Using jQuery UI に関する質問です。 h.. - 人力検索はてな http://q.hatena.ne.jp/1330341441
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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" dir="ltr"> | |
<head profile="http://gmpg.org/xfn/11"> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
<title>Featured Content Slider Using jQuery - Web Developer Plus Demos</title> | |
<link rel="stylesheet" type="text/css" href="style.css" /> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> | |
<script type="text/javascript"> | |
$(document).ready(function(){ | |
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 1000, true); | |
}); | |
</script> | |
<style> | |
#featured { | |
height: 630px; | |
} | |
</style> | |
</head> | |
<body> | |
<h3>» Featured Content Slider Using jQuery</h3> | |
<div id="featured" > | |
<ul class="ui-tabs-nav"> | |
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li> | |
<li class="ui-tabs-nav-item" id=""><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li> | |
<li class="ui-tabs-nav-item" id=""><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li> | |
<li class="ui-tabs-nav-item" id=""><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li> | |
<li class="ui-tabs-nav-item" id=""><a href="#fragment-5"><img src="images/image1-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li> | |
<li class="ui-tabs-nav-item" id=""><a href="#fragment-6"><img src="images/image2-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li> | |
<li class="ui-tabs-nav-item" id=""><a href="#fragment-7"><img src="images/image3-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li> | |
<li class="ui-tabs-nav-item" id=""><a href="#fragment-8"><img src="images/image4-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li> | |
<li class="ui-tabs-nav-item" id=""><a href="#fragment-9"><img src="images/image1-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li> | |
<li class="ui-tabs-nav-item" id=""><a href="#fragment-10"><img src="images/image2-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li> | |
</ul> | |
<!-- First Content --> | |
<div id="fragment-1" class="ui-tabs-panel" style=""> | |
<img src="images/image1.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
<!-- Second Content --> | |
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> | |
<img src="images/image2.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2> | |
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
<!-- Third Content --> | |
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> | |
<img src="images/image3.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >35 Amazing Logo Designs</a></h2> | |
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
<!-- Fourth Content --> | |
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> | |
<img src="images/image4.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> | |
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style=""> | |
<img src="images/image1.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> | |
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
<div id="fragment-6" class="ui-tabs-panel ui-tabs-hide" style=""> | |
<img src="images/image2.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> | |
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
<div id="fragment-7" class="ui-tabs-panel ui-tabs-hide" style=""> | |
<img src="images/image3.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> | |
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
<div id="fragment-8" class="ui-tabs-panel ui-tabs-hide" style=""> | |
<img src="images/image4.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> | |
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
<div id="fragment-9" class="ui-tabs-panel ui-tabs-hide" style=""> | |
<img src="images/image1.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> | |
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
<div id="fragment-10" class="ui-tabs-panel ui-tabs-hide" style=""> | |
<img src="images/image2.jpg" alt="" /> | |
<div class="info" > | |
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> | |
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment