Difference between revisions of "Team:BIT/Interlab"

 
(19 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>
−
    <link rel="stylesheet" href="css/test-style.css">
+
 
−
    <style type="text/css">
+
<style type="text/css">
−
        *
+
    *
 
{
 
{
 
     margin: 0;  
 
     margin: 0;  
Line 21: Line 21:
  
 
     width: 600px; height: 400px; border: 3px solid #333;
 
     width: 600px; height: 400px; border: 3px solid #333;
 +
    margin: 0 auto;
 
}
 
}
 
#list
 
#list
Line 89: Line 90:
 
     right: 20px;
 
     right: 20px;
 
}
 
}
−
    </style>
+
</style>
−
    <script>
+
 
−
        window.onload=function() {
+
    
−
            // body...
+
−
            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 = '';
+
−
                      /* prev和next每click一次，
+
−
                        就会清除一次前一个class为on的span元素，
+
−
                        所以没有必要再去循环下面的span*/
+
−
                        break;
+
−
                    }
+
−
                    //  或者直接遍历清除  buttons[i].className=""；
+
−
                }
+
−
                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;
+
−
                    // list.style.left=newLeft+"px";
+
−
                        if (newLeft >-600) {
+
−
                    list.style.left=-3000+"px";
+
−
                        };
+
−
                        if (newLeft <-3000) {
+
−
                    list.style.left=-600+"px";
+
−
                      };
+
−
                    }
+
−
                }
+
−
                go();
+
−
            };
+
−
             
+
−
            prev.onclick=function(){
+
−
                /*添加一个if判断index为1时，如果继续往前滚的话就让index返回第五个span
+
−
                但是当快速点击arrow时会出现一种span点亮延迟的情况。可以尝试把判断index是否大于1或小于5的情况放进
+
−
                判断是否animated的if语句中，先判断能不能点击，再点亮。
+
−
                */
+
−
                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") {
+
−
                        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>
+
 
</head>
 
</head>
 
<body>
 
<body>
Line 208: Line 98:
 
<div id="container">
 
<div id="container">
 
     <div id="list" style="left: -600px;">
 
     <div id="list" style="left: -600px;">
−
         <img src="https://static.igem.org/mediawiki/2018/d/d8/T--BIT--InterLab_Figure-CFU1.jpeg" alt="1"/>
+
         <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="1"/>
−
         <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="1"/>
+
         <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="1"/>
−
         <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="2"/>
+
         <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="2"/>
−
         <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="3"/>
+
         <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="3"/>
−
         <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="4"/>
+
         <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="4"/>
−
         <img src="img/555.jpg" alt="5"/>
+
         <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="5"/>
−
         <img src="img/111.jpg" alt="5"/>
+
         <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="5"/>
 
     </div>
 
     </div>
 
     <div id="buttons">
 
     <div id="buttons">
Line 226: 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