Difference between revisions of "Team:BIT/Interlab"

Line 1: Line 1:
−
 
+
  <script>
−
<html >
+
−
<head>
+
−
    <meta charset="UTF-8">
+
−
    <title>Document</title>
+
−
 
+
−
    <style type="text/css">
+
−
        *
+
−
{
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    text-decoration: none;
+
−
}
+
−
body
+
−
{
+
−
    padding: 20px;
+
−
}
+
−
#containers
+
−
{  position: relative;
+
−
    overflow: hidden;
+
−
 
+
−
    width: 600px; height: 400px; border: 3px solid #333;
+
−
    margin: 0 auto;
+
−
}
+
−
#list
+
−
{  position: absolute;
+
−
    z-index: 1;
+
−
    width: 4200px;
+
−
    height: 400px;
+
−
}
+
−
#list img
+
−
{
+
−
    float: left;
+
−
    width: 600px;
+
−
}
+
−
#buttons
+
−
{
+
−
    position: absolute;
+
−
    z-index: 2;
+
−
    bottom: 20px;
+
−
    left: 250px;
+
−
    width: 100px;
+
−
    height: 10px;
+
−
}
+
−
#buttons span
+
−
{float: left;
+
−
    width: 10px;
+
−
    height: 10px;
+
−
    margin-right: 5px;
+
−
 
+
−
    cursor: pointer;
+
−
    border: 1px solid #fff;
+
−
    border-radius: 50%;
+
−
    background: #333;
+
−
}
+
−
#buttons .on
+
−
{
+
−
    background: orangered;
+
−
}
+
−
.arrow
+
−
{font-size: 36px;
+
−
    font-weight: bold;
+
−
    line-height: 39px;
+
−
    position: absolute;
+
−
    z-index: 2;
+
−
    top: 180px;
+
−
    display: none;
+
−
    width: 40px;
+
−
    height: 40px;  
+
−
 
+
−
    cursor: pointer;
+
−
    text-align: center;
+
−
    color: #fff;
+
−
    background-color: RGBA(0,0,0,.3);
+
−
}
+
−
.arrow:hover
+
−
{
+
−
    background-color: RGBA(0,0,0,.7);
+
−
}
+
−
#containers:hover .arrow
+
−
{
+
−
    display: block;
+
−
}
+
−
#prev
+
−
{
+
−
    left: 20px;
+
−
}
+
−
#next
+
−
{
+
−
    right: 20px;
+
−
}
+
−
    </style>
+
−
</head>
+
−
<body>
+
−
   
+
−
<div id="containers">
+
−
    <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"/>
+
−
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="2"/>
+
−
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="3"/>
+
−
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="4"/>
+
−
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="5"/>
+
−
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="5"/>
+
−
    </div>
+
−
    <div id="buttons">
+
−
        <span pzz="1" class="on"></span>
+
−
        <span pzz="2"></span>
+
−
        <span pzz="3"></span>
+
−
        <span pzz="4"></span>
+
−
        <span pzz="5"></span>
+
−
    </div>
+
−
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
+
−
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
+
−
</div>
+
−
<script>
+
 
         window.onload=function() {
 
         window.onload=function() {
 
             // body...  
 
             // body...  
Line 227: Line 112:
 
         }
 
         }
 
     </script>
 
     </script>
−
</body>
 
−
</html>
 

Revision as of 09:40, 9 September 2018

<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>