Difference between revisions of "Team:BIT/Interlab"

 
(12 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 container=document.getElementById("container");
 
            var index=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[index -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 (index==1) {
 
                    index=5;
 
                }else {
 
                  index -=1;
 
                }
 
               
 
                shownButton();
 
                    animate(600);
 
                }
 
             
 
             
 
            };
 
            next.onclick=function(){
 
               
 
               
 
               
 
                if (!animated) {
 
                    if (index==5) {
 
                    index=1;
 
                }else {
 
                  index +=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 myIndex=parseInt(this.getAttribute("index"));
+
                    var offset=-600*(myIndex-index);
+
                    if (!animated) {
+
                    animate(offset);
+
                }
+
                    index=myIndex;
+
                    shownButton();
+
               
+
                }
+
            }
+
           
+
            function play(){
+
                timer=setInterval(function(){
+
                    next.onclick();
+
                },2000);
+
            }
+
            function stop(){
+
                clearInterval(timer);
+
            }
+
          play();
+
        container.onmouseover=stop;
+
        container.onmouseout=play;
+
        }
+
    </script>
+
    <style type="text/css">
+
        *
+
 
{
 
{
 
     margin: 0;  
 
     margin: 0;  
Line 197: Line 90:
 
     right: 20px;
 
     right: 20px;
 
}
 
}
    </style>
+
</style>
 +
 
 +
 
 
</head>
 
</head>
 
<body>
 
<body>
Line 221: Line 116:
 
     <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