Difference between revisions of "Team:XJTU-China"

(Add coursel)
Line 4: Line 4:
 
<head>
 
<head>
 
<meta charset="utf-8" />
 
<meta charset="utf-8" />
<style type="text/css">
 
.showbox{
 
    position: relative;
 
    height: 400px;
 
    width: 100%;
 
    overflow: hidden;
 
    border: 10px solid #eee;
 
    background-color: #eee;
 
    border-radius: 10px;
 
    -webkit-border-radius:10px;
 
    -moz-border-radius:10px;
 
}
 
 
.imagebox{
 
    position: relative;
 
    height: 400px;
 
    width: 100%;
 
    top: 0;
 
    left: 5px;
 
    overflow: hidden;
 
}
 
 
.imagebox img{
 
    display: block;
 
    width: 100%;
 
    height: 400px;
 
    float: left;
 
 
}
 
 
.icobox{
 
    position: absolute;
 
    border: none;
 
    width: 120px;
 
    height: 12px;
 
    left: 220px;
 
    bottom: 10px;
 
    text-align: center;
 
    line-height: 40px;
 
    overflow: hidden;
 
}
 
 
.icobox span{
 
    background: url("../image/ico.png") 0px 0px no-repeat;
 
    width: 12px;
 
    height: 12px;
 
    cursor: pointer;
 
    float: left;
 
    margin-left: 3px;
 
}
 
 
.icobox span.active{
 
    background: url("../image/ico.png") 0px -12px no-repeat;
 
    cursor: default;
 
}
 
</style>
 
 
</head>
 
</head>
  
Line 96: Line 40:
 
<div class="column full_size" >
 
<div class="column full_size" >
 
<h3>Gallery</h3>
 
<h3>Gallery</h3>
<p style="text-align:center"><img style="display:inline-block;width:60%;" src="https://static.igem.org/mediawiki/2018/thumb/9/96/T--XJTU-China--labPhotoForSafetyForm-1.jpeg/800px-T--XJTU-China--labPhotoForSafetyForm-1.jpeg" />
+
<div class="coursel">
<p style="text-align:center"> Lab overview 1 </p>
+
<div><img class="courselPic" src="https://static.igem.org/mediawiki/2018/thumb/9/96/T--XJTU-China--labPhotoForSafetyForm-1.jpeg/800px-T--XJTU-China--labPhotoForSafetyForm-1.jpeg" />
 +
<p>Lab overview 1</p></div>
 +
<div><img class="courselPic" src="https://static.igem.org/mediawiki/2018/thumb/b/bd/T--XJTU-China--labPhotoForSafetyForm-2.jpeg/800px-T--XJTU-China--labPhotoForSafetyForm-2.jpeg" />
 +
<p>Lab overview 2</p></div>
 +
<div><img class="courselPic" src="https://static.igem.org/mediawiki/2018/thumb/8/88/T--XJTU-China--labPhotoForSafetyForm-3.jpeg/800px-T--XJTU-China--labPhotoForSafetyForm-3.jpeg" />
 +
<p>Lab overview 3</p></div>
 +
</div>
 
<div class="line_divider"></div>
 
<div class="line_divider"></div>
 
<br />
 
<br />
 +
 +
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
 +
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 +
<script type="text/javascript">
 +
    $(document).ready(function(){
 +
      $('.coursel').slick({
 +
        dots: true,
 +
  infinite: true,
 +
speed: 300,
 +
autoplay: true,
 +
  autoplaySpeed: 2000,
 +
  slidesToShow: 1
 +
      });
 +
    });
 +
  </script>
 
</div>
 
</div>
  
<div class="showbox">
 
        <div class="imagebox"> //放置图片
 
            <img src="https://static.igem.org/mediawiki/2018/5/56/T--XJTU-China--QRCode.jpg" alt="1.jpg" />
 
            <img src="https://static.igem.org/mediawiki/2018/f/f4/T--XJTU-China--teamLogo2.png" alt="2.jpg" />
 
            <img src="https://static.igem.org/mediawiki/2018/thumb/9/96/T--XJTU-China--labPhotoForSafetyForm-1.jpeg/800px-T--XJTU-China--labPhotoForSafetyForm-1.jpeg" alt="3.jpg" />
 
            <img src="https://static.igem.org/mediawiki/2018/f/f4/T--XJTU-China--teamLogo2.png" alt="4.jpg" />
 
        </div>
 
        <div class="icobox"> //放置图标
 
            <pan rel="0" class="active">0</span>
 
            <span rel="1">1</span>
 
            <span rel="2">2</span>
 
            <span rel="3">3</span>
 
        </div>
 
    </div>
 
 
<script type="text/javascript">
 
$(document).ready(function() {
 
    var imagebox=$(".showbox").children('.imagebox')[0],//获得图片容器
 
        icobox=$(".showbox").children('.icobox')[0],//获得图标容器
 
        ico=$(icobox).children('span'),//获得图标数组
 
        imagenum=$(imagebox).children().size(),//获得图片数量
 
        imageboxWidth=$(imagebox).width(),//获得图片容器的宽度
 
        imagewidth=imageboxWidth*imagenum,//获得图片的总宽度
 
        activeID = parseInt($($(icobox).children(".active")[0] ).attr("rel")),//获得激活的图标ID
 
        nextID=0,//下一个图标的ID
 
        intervalID,//setInterval()函数的ID
 
        delaytime=4000,//延迟的时间
 
        speed=700;//执行速度
 
        $(imagebox).css({'width' : imagewidth + "px"});
 
 
        var rotate=function(clickID) { //图片滑动函数
 
            if (clickID+1){
 
                nextID=clickID;
 
            }else{
 
                nextID=(activeID+1)%4;
 
            };
 
            $(ico[activeID]).removeClass('active');
 
            $(ico[nextID]).addClass('active');
 
            $(imagebox).animate({left:"-"+nextID*imageboxWidth+"px"}, speed);//jQuery中的animate函数
 
            activeID=nextID;
 
        }
 
 
        intervalID=setInterval(rotate,delaytime);//循环函数
 
 
        $.each(ico, function(index, val) {
 
            $(this).click(function(event) {
 
                clearInterval(intervalID);//清楚之前的定时任务
 
                var clickID = index;
 
                rotate(clickID);//运行一次带参数的rotate函数
 
                intervalID = setInterval(rotate,delaytime);
 
            });
 
        });
 
});
 
</script>
 
 
</body>
 
 
</html>
 
</html>

Revision as of 15:51, 27 June 2018

XJTU-China 2018

A Standard Framework for Directed Evolution

Know more about us

Our Twitter mainpage:

Wechat official public account:

E-mail address: XJTU-China

A mirror for synthetic biology hub (for mianland China users)

Description

One may say that our project, the project of XJTU-China 2018, is established from two distinct point-of-view. The design philosophy of synthetic biology: top-down and bottom-up meets and thus is how we come up with this idea.

The first idea comes from the dillema for those who want to lose weight, or especilly for those who suffer from diabetes: health and taste. Sugar are delightful but the energy it provides may lead to trouble. That's the reason why a variety of sugar substitutes emerges, but none without a clear record of health concerns. That's the reason here we introduce psicose, a rare sugar, the C-3 epimer of fructose, which is the ultimate solution of saccrose substitute: a balance between sweetness and low energy (about 3% of that in saccrose).

Chemical manufacturing of psicose is laborous and poses trouble in chiral separation. Biomanufacturing is promising but suffers severely from low enzymatic activity. The goal of our team is to find a reliable, robust and high throughput method in screening for enzymes with high activity.

The second idea emerges from the concerns about the instability of traditional continuous-culture-based directed evolution. Why a accelerated Darwinian evolution is never achieved with simple tools of pressure-introducing such as toxic proteins or antibiotics? We would manage to build up a Standard Framework for Directed Evolution with detailed data and standarized procedures.

We are applying this exciting new method in searching for a more optimized enzyme for the biomanufacturing of psicose.

Gallery

Lab overview 1

Lab overview 2

Lab overview 3