Difference between revisions of "Team:BIT/Interlab"

Line 1: Line 1:
−
<p>Interlab</p>
+
<!DOCTYPE html>
−
</br>
+
<html lang="en">
−
<p>hello world</p>
+
<head>
 +
    <meta charset="UTF-8">
 +
    <title>Document</title>
 +
    <link rel="stylesheet" href="css/test-style.css">
 +
    <style type="text/css">
 +
        *
 +
{
 +
    margin: 0;
 +
    padding: 0;
 +
    text-decoration: none;
 +
}
 +
body
 +
{
 +
    padding: 20px;
 +
}
 +
#container
 +
{  position: relative;
 +
    overflow: hidden;
 +
 
 +
    width: 600px; height: 400px; border: 3px solid #333;
 +
}
 +
#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);
 +
}
 +
#container:hover .arrow
 +
{
 +
    display: block;
 +
}
 +
#prev
 +
{
 +
    left: 20px;
 +
}
 +
#next
 +
{
 +
    right: 20px;
 +
}
 +
    </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>
 +
<body>
 +
   
 +
<div id="container">
 +
    <div id="list" style="left: -600px;">
 +
        <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="1"/>
 +
        <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="1"/>
 +
        <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="2"/>
 +
        <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="3"/>
 +
        <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="4"/>
 +
        <img src="img/555.jpg" alt="5"/>
 +
        <img src="img/111.jpg" alt="5"/>
 +
    </div>
 +
    <div id="buttons">
 +
        <span index="1" class="on"></span>
 +
        <span index="2"></span>
 +
        <span index="3"></span>
 +
        <span index="4"></span>
 +
        <span index="5"></span>
 +
    </div>
 +
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
 +
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
 +
</div>
 +
</body>
 +
</html>

Revision as of 13:49, 8 September 2018

<!DOCTYPE html> Document

1 1 2 3 4 5 5