View source for Team:LZU-China/Cartoon

{{Template:LZU_China/Playground/style}}
{{Template:LZU_China/Playground/style2}}
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <title>Team:LZU 2015</title>
  <link rel="shortcut icon" href="http://7xkk8b.com1.z0.glb.clouddn.com/imgfavicon.ico" />
<style>
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear{display: none;} 
#globalWrapper, #content { /*-- changes default wiki settings --*/
  width: 100%; 
  height: 100%;
  border: 0px;
  background-color: transparent;
  margin: 0px;
  padding: 0px;
}

html, body, .wrapper { /*-- changes default wiki settings --*/
  width: 100%; 
  height: 100%; 
  background-color: transparent;  
}
</style>

<style>
		.top-banner {
			background-color: rgba(255, 255, 255, 0.55);
		}
		.top-banner a {
			color: #019135;
		}
		h1 {
			margin-top: 100px;
			font-family: 'Microsoft Yahei';
			font-size: 36px;
			color: #019157;
		}		
		</style>
		<script type="text/javascript" src="https://2015.igem.org/Team:LZU-China/chz_cartoon1js?action=raw&ctype=text/javascript"></script>




  <!-- CSS 
  <link href="https://2015.igem.org/Team:LZU-China/chz_materialize.css?action=raw&ctype=text/css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="https://2015.igem.org/Team:LZU-China/chz_style2.css?action=raw&ctype=text/css" type="text/css" rel="stylesheet" media="screen,projection"/>
    -->


</head>
<body>
  
		<div class="container">
		<div>
			<h2>Watch the Cartoon Before Your Wiki Journey</h2>
		</div>

			<div class="wrapper">

				<ul id="sb-slider" class="sb-slider">
					<li>
						<a href="https://2015.igem.org/Team:LZU-China/chz_index" target="_blank"><img src="http://7xlwcd.com1.z0.glb.clouddn.com/1.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>1. </h3>
						</div>
					</li>
					<li>
						<a href="https://2015.igem.org/Team:LZU-China/chz_index" target="_blank"><img src="http://7xlwcd.com1.z0.glb.clouddn.com/2.jpg" alt="image2"/></a>
						<div class="sb-description">
							<h3>2. </h3>
						</div>
					</li>
					<li>
						<a href="https://2015.igem.org/Team:LZU-China/chz_index" target="_blank"><img src="http://7xlwcd.com1.z0.glb.clouddn.com/3.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>3. </h3>
						</div>
					</li>
					<li>
						<a href="https://2015.igem.org/Team:LZU-China/chz_index" target="_blank"><img src="http://7xlwcd.com1.z0.glb.clouddn.com/4.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>4. </h3>
						</div>
					</li>
				</ul>

				<div id="shadow" class="shadow"></div>

				<div id="nav-arrows" class="nav-arrows">
					<a href="#">Next</a>
					<a href="#">Previous</a>
				</div>

				<div id="nav-dots" class="nav-dots">
					<span class="nav-dot-current"></span>
					<span></span>
					<span></span>
					<span></span>
				</div>

			</div><!-- /wrapper -->

		


		<div class="footer-banner" style="width:728px; margin:30px auto"></div>
		</div>
		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="https://2015.igem.org/Team:LZU-China/chz_cartoon0js?action=raw&ctype=text/javascript"></script>
		<script type="text/javascript">
			$(function() {

				var Page = (function() {

					var $navArrows = $( '#nav-arrows' ).hide(),
						$navDots = $( '#nav-dots' ).hide(),
						$nav = $navDots.children( 'span' ),
						$shadow = $( '#shadow' ).hide(),
						slicebox = $( '#sb-slider' ).slicebox( {
							onReady : function() {

								$navArrows.show();
								$navDots.show();
								$shadow.show();

							},
							onBeforeChange : function( pos ) {

								$nav.removeClass( 'nav-dot-current' );
								$nav.eq( pos ).addClass( 'nav-dot-current' );

							}
						} ),
						
						init = function() {

							initEvents();
							
						},
						initEvents = function() {

							// add navigation events
							$navArrows.children( ':first' ).on( 'click', function() {

								slicebox.next();
								return false;

							} );

							$navArrows.children( ':last' ).on( 'click', function() {
								
								slicebox.previous();
								return false;

							} );

							$nav.each( function( i ) {
							
								$( this ).on( 'click', function( event ) {
									
									var $dot = $( this );
									
									if( !slicebox.isActive() ) {

										$nav.removeClass( 'nav-dot-current' );
										$dot.addClass( 'nav-dot-current' );
									
									}
									
									slicebox.jump( i + 1 );
									return false;
								
								} );
								
							} );

						};

						return { init : init };

				})();

				Page.init();

			});
		</script>







</body>
</html>