Team:Shenzhen BGIC 0101
From 2013.igem.org
(Difference between revisions)
Line 3: | Line 3: | ||
<head> | <head> | ||
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> | <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> | ||
- | <script src=" | + | <script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | function prevTimers() { | ||
+ | return allTimers().slice( 0, $('#pager a.selected').index() ); | ||
+ | } | ||
+ | function allTimers() { | ||
+ | return $('#pager a span'); | ||
+ | } | ||
+ | |||
$(function() { | $(function() { | ||
$('#carousel').carouFredSel({ | $('#carousel').carouFredSel({ | ||
- | + | items: 1, | |
- | + | auto: { | |
- | + | pauseOnHover: 'resume', | |
- | + | progress: { | |
- | + | bar: '#pager a:first span' | |
+ | } | ||
}, | }, | ||
- | |||
- | |||
scroll: { | scroll: { | ||
- | + | fx: 'crossfade', | |
- | + | duration: 300, | |
- | + | timeoutDuration: 6000, | |
- | + | onAfter: function() { | |
- | + | allTimers().stop().width( 0 ); | |
- | onAfter: function( | + | prevTimers().width( 140 ); |
- | + | $(this).trigger('configuration', [ 'auto.progress.bar', '#pager a.selected span' ]); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
}, | }, | ||
- | + | pagination: { | |
- | + | container: '#pager', | |
- | + | anchorBuilder: false | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
- | < | + | <style type="text/css"> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #carousel { | |
- | + | width: 576px; | |
- | # | + | height: 335px; |
- | + | } | |
- | display: block; | + | #carousel img { |
- | + | border: 1px solid #ccc; | |
- | + | display: block; | |
- | + | padding: 10px; | |
- | + | float: left; | |
- | + | } | |
- | + | #pager { | |
- | + | margin-top: 5px; | |
- | + | width: 600px; | |
- | - | + | } |
- | - | + | #pager a, #pager span { |
- | - | + | display: block; |
- | + | height: 10px; | |
- | } | + | } |
+ | #pager a { | ||
+ | border: 1px solid #ccc; | ||
+ | width: 92px; | ||
+ | margin-right: 3px; | ||
+ | float: left; | ||
+ | } | ||
+ | #pager a:hover { | ||
+ | border-color: #999; | ||
+ | } | ||
+ | #pager span { | ||
+ | background-color: #ccc; | ||
+ | width: 0px; | ||
+ | } | ||
- | + | #donate-spacer { | |
- | + | height: 100%; | |
- | + | } | |
- | + | #donate { | |
- | #donate-spacer { | + | border-top: 1px solid #999; |
- | height: 100%; | + | width: 750px; |
- | + | padding: 50px 75px; | |
- | #donate { | + | margin: 0 auto; |
- | border-top: 1px solid #999; | + | overflow: hidden; |
- | width: 750px; | + | } |
- | padding: 50px 75px; | + | #donate p, #donate form { |
- | margin: 0 auto; | + | margin: 0; |
- | overflow: hidden; | + | float: left; |
- | } | + | } |
- | #donate p, #donate form { | + | #donate p { |
- | + | width: 650px; | |
- | } | + | } |
- | #donate p { | + | #donate form { |
- | width: 650px; | + | width: 100px; |
- | } | + | } |
- | #donate form { | + | </style> |
- | width: 100px; | + | |
- | } | + | |
- | + | ||
- | </ | + | |
</head> | </head> | ||
- | <body | + | <body> |
- | + | ||
<div id="wrapper"> | <div id="wrapper"> | ||
<div id="carousel"> | <div id="carousel"> | ||
- | <img src="https://static.igem.org/mediawiki/2013/5/50/Frontpage1.png" width=" | + | <img src="https://static.igem.org/mediawiki/2013/5/50/Frontpage1.png" width="560" height="371"/ > |
<img src="https://static.igem.org/mediawiki/2013/9/91/Frontpage2.png" width="560" height="371" /> | <img src="https://static.igem.org/mediawiki/2013/9/91/Frontpage2.png" width="560" height="371" /> | ||
<img src="https://static.igem.org/mediawiki/2013/3/3d/Frontpage3.png" width="560" height="371" /> | <img src="https://static.igem.org/mediawiki/2013/3/3d/Frontpage3.png" width="560" height="371" /> | ||
<img src="https://static.igem.org/mediawiki/2013/f/f7/Frontpage4.png" width="560" height="371" /> | <img src="https://static.igem.org/mediawiki/2013/f/f7/Frontpage4.png" width="560" height="371" /> | ||
<img src="https://static.igem.org/mediawiki/2013/5/53/Frontpage5.png" width="560" height="371" /> | <img src="https://static.igem.org/mediawiki/2013/5/53/Frontpage5.png" width="560" height="371" /> | ||
- | <img src="https://static.igem.org/mediawiki/2013/f/f6/Frontpage6.png" width="560" height="371" /> | + | <img src="https://static.igem.org/mediawiki/2013/f/f6/Frontpage6.png" width="560" height="371" class="last" /> |
+ | </div> | ||
+ | <div id="pager"> | ||
+ | <a href="#"><span></span></a> | ||
+ | <a href="#"><span></span></a> | ||
+ | <a href="#"><span></span></a> | ||
+ | <a href="#"><span></span></a> | ||
+ | <a href="#"><span></span></a> | ||
+ | <a href="#"><span></span></a> | ||
</div> | </div> | ||
</div> | </div> | ||
- | < | + | <div style="text-align:center;clear:both"> |
- | </body> | + | |
+ | </div> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 22:26, 25 October 2013