Difference between revisions of "Team:BIT/Interlab"

 
(7 intermediate revisions by one other user not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <title>Document</title>
 
     <title>Document</title>
−
    <script>
 
−
        window.onload=function() {
 
−
 
−
            var prev=document.getElementById("prev");
 
−
            var next=document.getElementById("next");
 
−
            var list=document.getElementById("list");
 
−
            var buttons=document.getElementById("buttons").getElementsByTagName("span");
 
−
            var containers=document.getElementById("containers");
 
−
            var pzz=1;
 
−
            var timer;
 
−
            var animated=false;
 
−
            function shownButton(){
 
−
                for (var i = 0; i < buttons.length ; i++) {
 
−
                    if( buttons[i].className == 'on'){
 
−
                        buttons[i].className = '';
 
−
                     
 
−
                        break;
 
−
                    }
 
−
                   
 
−
                }
 
−
                buttons[pzz -1].className="on";
 
−
            }
 
−
            function animate(offset){
 
−
                var time = 300;
 
−
                var inteval = 10;
 
−
                var speed = offset/(time/inteval);
 
−
                  animated=true;
 
−
                var newLeft=parseInt(list.style.left) +offset;
 
−
                function go(){
 
−
                    if ( (speed > 0 && parseInt(list.style.left) < newLeft) || (speed < 0 && parseInt(list.style.left) > newLeft)) {
 
−
                        list.style.left = parseInt(list.style.left) + speed + 'px';
 
−
                        setTimeout(go, inteval);
 
−
                    }
 
−
                    else
 
−
                    {
 
−
                       
 
−
                      animated=false;
 
−
 
−
                        if (newLeft >-600) {
 
−
                    list.style.left=-3000+"px";
 
−
                        };
 
−
                        if (newLeft <-3000) {
 
−
                    list.style.left=-600+"px";
 
−
                      };
 
−
                    }
 
−
                }
 
−
                go();
 
−
            };
 
−
             
 
−
            prev.onclick=function(){
 
−
 
 
−
                if (!animated) {
 
−
                if (pzz==1) {
 
−
                    pzz=5;
 
−
                }else {
 
−
                  pzz -=1;
 
−
                }
 
−
               
 
−
                shownButton();
 
−
                    animate(600);
 
−
                }
 
−
             
 
−
             
 
−
            };
 
−
            next.onclick=function(){
 
−
               
 
−
               
 
−
               
 
−
                if (!animated) {
 
−
                    if (pzz==5) {
 
−
                    pzz=1;
 
−
                }else {
 
−
                  pzz +=1;
 
−
                }   
 
−
                    shownButton();
 
−
                    animate(-600);
 
−
                }
 
−
            };
 
−
            for (var i = 0; i < buttons.length; i++) {
 
−
                buttons[i].onclick=function(){
 
  
−
                    if (this.className=="on") {
+
<style type="text/css">
−
                        return;
+
    *
−
                    }
+
−
                    var mypzz=parseInt(this.getAttribute("pzz"));
+
−
                    var offset=-600*(mypzz-pzz);
+
−
                    if (!animated) {
+
−
                    animate(offset);
+
−
                }
+
−
                    pzz=mypzz;
+
−
                    shownButton();
+
−
               
+
−
                }
+
−
            }
+
−
           
+
−
            function play(){
+
−
                timer=setInterval(function(){
+
−
                    next.onclick();
+
−
                },2000);
+
−
            }
+
−
            function stop(){
+
−
                clearInterval(timer);
+
−
            }
+
−
          play();
+
−
        containers.onmouseover=stop;
+
−
        containers.onmouseout=play;
+
−
        }
+
−
    </script>
+
−
    <style type="text/css">
+
−
        *
+
 
{
 
{
 
     margin: 0;  
 
     margin: 0;  
Line 123: Line 16:
 
     padding: 20px;
 
     padding: 20px;
 
}
 
}
−
#containers
+
#container
 
{  position: relative;
 
{  position: relative;
 
     overflow: hidden;  
 
     overflow: hidden;  
Line 185: Line 78:
 
     background-color: RGBA(0,0,0,.7);
 
     background-color: RGBA(0,0,0,.7);
 
}
 
}
−
#containers:hover .arrow
+
#container:hover .arrow
 
{
 
{
 
     display: block;
 
     display: block;
Line 197: Line 90:
 
     right: 20px;
 
     right: 20px;
 
}
 
}
−
    </style>
+
</style>
 +
 
 +
 
 
</head>
 
</head>
 
<body>
 
<body>
 
      
 
      
−
<div id="containers">
+
<div id="container">
 
     <div id="list" style="left: -600px;">
 
     <div id="list" style="left: -600px;">
 
         <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="1"/>
 
         <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="1"/>
Line 212: Line 107:
 
     </div>
 
     </div>
 
     <div id="buttons">
 
     <div id="buttons">
−
         <span pzz="1" class="on"></span>
+
         <span index="1" class="on"></span>
−
         <span pzz="2"></span>
+
         <span index="2"></span>
−
         <span pzz="3"></span>
+
         <span index="3"></span>
−
         <span pzz="4"></span>
+
         <span index="4"></span>
−
         <span pzz="5"></span>
+
         <span index="5"></span>
 
     </div>
 
     </div>
 
     <a href="javascript:;" id="prev" class="arrow">&lt;</a>
 
     <a href="javascript:;" id="prev" class="arrow">&lt;</a>
 
     <a href="javascript:;" id="next" class="arrow">&gt;</a>
 
     <a href="javascript:;" id="next" class="arrow">&gt;</a>
 
</div>
 
</div>
 +
<script type="text/javascript" src="https://2018.igem.org/Template:BIT/9.9test/Javascript?action=raw&amp;ctype=text/javascript"></script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 09:54, 9 September 2018

Document

1 1 2 3 4 5 5