Template:Mexico-UNAM-CINVESTAV-ROTATOR

From 2010.igem.org

(Difference between revisions)
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&amp;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&amp;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>

Revision as of 08:29, 22 October 2010

    • Retrieved from "http://2010.igem.org/Template:Mexico-UNAM-CINVESTAV-ROTATOR"