Team:Shenzhen BGIC 0101
From 2013.igem.org
(Difference between revisions)
(36 intermediate revisions not shown) | |||
Line 5: | Line 5: | ||
<script src="https://2013.igem.org/Team:Shenzhen_BGIC_0101/js/jquerycarouFredSel?action=raw&ctype=text/js" type="text/javascript"></script> | <script src="https://2013.igem.org/Team:Shenzhen_BGIC_0101/js/jquerycarouFredSel?action=raw&ctype=text/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 | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
}); | }); | ||
Line 42: | Line 40: | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
#carousel { | #carousel { | ||
- | width: | + | width: 750px; |
- | height: | + | height: 480px; |
- | + | ||
} | } | ||
#carousel img { | #carousel img { | ||
- | border: | + | border: 1px solid #ccc; |
display: block; | display: block; | ||
- | + | padding: 10px; | |
- | + | float: left; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #pager { | |
- | # | + | margin-top: 5px; |
- | + | width: 750px; | |
+ | } | ||
+ | #pager a, #pager span { | ||
display: block; | display: block; | ||
- | + | height: 10px; | |
- | height: | + | } |
- | + | #pager a { | |
- | + | border: 1px solid #ccc; | |
- | + | width: 119px; | |
- | + | margin-right: 3px; | |
- | + | float: left; | |
- | + | } | |
- | + | #pager a:hover { | |
- | - | + | border-color: #999; |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #pager span { |
- | + | background-color: #ccc; | |
+ | width: 0px; | ||
} | } | ||
Line 84: | Line 77: | ||
#donate { | #donate { | ||
border-top: 1px solid #999; | border-top: 1px solid #999; | ||
- | width: | + | width: 800px; |
padding: 50px 75px; | padding: 50px 75px; | ||
margin: 0 auto; | margin: 0 auto; | ||
Line 94: | Line 87: | ||
} | } | ||
#donate p { | #donate p { | ||
- | width: | + | width: 730px; |
} | } | ||
#donate form { | #donate form { | ||
Line 101: | Line 94: | ||
</style> | </style> | ||
</head> | </head> | ||
- | <body> | + | <body> |
- | + | <h1 style="text-align:center;">This is our story!</h1> | |
+ | |||
<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="720" height="477"/ > |
- | <img src="https://static.igem.org/mediawiki/2013/9/91/Frontpage2.png" width=" | + | <img src="https://static.igem.org/mediawiki/2013/9/91/Frontpage2.png" width="720" height="477" /> |
- | <img src="https://static.igem.org/mediawiki/2013/3/3d/Frontpage3.png" width=" | + | <img src="https://static.igem.org/mediawiki/2013/3/3d/Frontpage3.png" width="720" height="477" /> |
- | <img src="https://static.igem.org/mediawiki/2013/f/f7/Frontpage4.png" width=" | + | <img src="https://static.igem.org/mediawiki/2013/f/f7/Frontpage4.png" width="720" height="477" /> |
- | <img src="https://static.igem.org/mediawiki/2013/5/53/Frontpage5.png" width=" | + | <img src="https://static.igem.org/mediawiki/2013/5/53/Frontpage5.png" width="720" height="477" /> |
- | <img src="https://static.igem.org/mediawiki/2013/f/f6/Frontpage6.png" width=" | + | <img src="https://static.igem.org/mediawiki/2013/f/f6/Frontpage6.png" width="720" height="477" class="last" /> |
</div> | </div> | ||
- | + | <div id="pager"> | |
- | + | <a href="#"><span></span></a> | |
- | < | + | <a href="#"><span></span></a> |
- | </body> | + | <a href="#"><span></span></a> |
+ | <a href="#"><span></span></a> | ||
+ | <a href="#"><span></span></a> | ||
+ | <a href="#"><span></span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div style="text-align:center;clear:both"> | ||
+ | |||
+ | </div> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 19:10, 28 October 2013