|
|
Line 1: |
Line 1: |
| <html> | | <html> |
| <head> | | <head> |
- | <style type="text/css"> | + | <script type="text/javascript" src="https://2010.igem.org/Team:Mexico-UNAM-CINVESTAV/files/jquery.js?action=raw&ctype=text/javascript"></script> |
- | body {
| + | <script type="text/javascript" src="https://2010.igem.org/Team:Mexico-UNAM-CINVESTAV/files/jquery.cycle.min.js?action=raw&ctype=text/javascript"></script> |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | color: #4E3D4E;
| + | |
- | font: normal 0.6em sans-serif, Arial;
| + | |
- | background-color: #EDEDED;
| + | |
- | width: 100%;
| + | |
- | }
| + | |
- | </style> | + | |
| | | |
- | <style type="text/css"> | + | <script> |
- | /* rotator in-page placement */
| + | <script type=”text/javascript”> |
- | div#rotator {
| + | $(document).ready(function() { |
- | position:relative;
| + | $(‘.pics’).cycle({ |
- | height:20px;
| + | fx: ‘fade’, |
- | margin-left: 0px;
| + | speed: 5000 |
- | } | + | }); |
- | /* rotator css */
| + | }); |
- | div#rotator ul li {
| + | </script> |
- | float:left;
| + | |
- | position:absolute;
| + | |
- | list-style: none;
| + | |
- | } | + | |
- | /* rotator image style */
| + | |
- | div#rotator ul li img {
| + | |
- | border:0px solid #ccc;
| + | |
- | padding: 0px;
| + | |
- | background: #FFF;
| + | |
- | }
| + | |
- | div#rotator ul li.show {
| + | |
- | z-index:500
| + | |
- | }
| + | |
- | </style> | + | |
| | | |
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
| |
| | | |
- | <script type="text/javascript"> | + | </head> |
| | | |
- | function theRotator() {
| |
- | //Set the opacity of all images to 0
| |
- | $('div#rotator ul li').css({opacity: 0.0});
| |
- |
| |
- | //Get the first image and display it (gets set to full opacity)
| |
- | $('div#rotator ul li:first').css({opacity: 1.0});
| |
- |
| |
- | //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
| |
- | setInterval('rotate()',6000);
| |
- |
| |
- | }
| |
| | | |
- | function rotate() {
| |
- | //Get the first image
| |
- | var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
| |
- |
| |
- | //Get next image, when it reaches the end, rotate it back to the first image
| |
- | var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
| |
- |
| |
- | //Set the fade in effect for the next image, the show class has higher z-index
| |
- | next.css({opacity: 0.0})
| |
- | .addClass('show')
| |
- | .animate({opacity: 1.0}, 1000);
| |
- |
| |
- | //Hide the current image
| |
- | current.animate({opacity: 0.0}, 1000)
| |
- | .removeClass('show');
| |
- |
| |
- | };
| |
- |
| |
- | $(document).ready(function() {
| |
- | //Load the slideshow
| |
- | theRotator();
| |
- | });
| |
- |
| |
- | </script>
| |
- |
| |
- | </head>
| |
- | <body>
| |
| | | |
- | <div id="rotator">
| |
- | <ul>
| |
- | <li class="show"><img src="https://static.igem.org/mediawiki/2010/7/77/Mx-Logo01.gif"/></a></li>
| |
- | <li><a href="http://www.alohatechsupport.net/"><img src="https://static.igem.org/mediawiki/2010/d/d8/Mx-Logo02.gif" alt="pic2" /></a></li>
| |
- | <li><a href="http://www.alohatechsupport.net/mauiwebdesign.html"><img src="https://static.igem.org/mediawiki/2010/d/dc/Mx-Logo03.gif" alt="pic3" /></a></li>
| |
| | | |
- | <li><a href="#"><img src="https://static.igem.org/mediawiki/2010/b/b0/Mx-Logo04.gif" /></a></li> | + | <div class=”pics”> |
| + | |
| + | <img src="https://static.igem.org/mediawiki/2010/7/77/Mx-Logo01.gif"/></li> |
| + | <img src="https://static.igem.org/mediawiki/2010/d/d8/Mx-Logo02.gif" /></li> |
| + | <img src="https://static.igem.org/mediawiki/2010/d/dc/Mx-Logo03.gif" /></li> |
| + | <li><img src="https://static.igem.org/mediawiki/2010/b/b0/Mx-Logo04.gif"/></li> |
| </ul> | | </ul> |
| </div> | | </div> |