Difference between revisions of "Team:HZAU-China"

Line 36: Line 36:
 
       margin: 0 0 0 -50px;
 
       margin: 0 0 0 -50px;
 
     }
 
     }
     #anniu>img{
+
 
       height:100px;
+
     #anniu>img {
 +
       height: 100px;
 
     }
 
     }
  
Line 59: Line 60:
 
     .zhanshiqu {
 
     .zhanshiqu {
 
       position: relative;
 
       position: relative;
      top: 300px;
 
 
     }
 
     }
  
 
     /*-- 轮播图主体样式-- */
 
     /*-- 轮播图主体样式-- */
 +
 +
    .bianda {
 +
      width: 1200px;
 +
      margin: 300px auto 0 auto;
 +
    }
  
 
     #rongqi {
 
     #rongqi {
 
       width: 950px;
 
       width: 950px;
 
       height: 600px;
 
       height: 600px;
       margin: 20px auto;
+
       margin: 0 auto;
 
       border-radius: 5px;
 
       border-radius: 5px;
 
       overflow: hidden;
 
       overflow: hidden;
Line 111: Line 116:
 
     #rongqi span {
 
     #rongqi span {
 
       display: inline-block;
 
       display: inline-block;
       width: 15px;
+
       width: 50px;
       height: 10px;
+
       height: 25px;
       margin: 0 3px;
+
       margin: 0 10px;
       border-radius: 5px;
+
       border-radius: 11px;
 
       background: white;
 
       background: white;
 
       transition: width 0.3s;
 
       transition: width 0.3s;
Line 120: Line 125:
  
 
     #rongqi span.yundong {
 
     #rongqi span.yundong {
       width: 25px;
+
       width: 78px;
 
       background: #A08989;
 
       background: #A08989;
 
     }
 
     }
Line 290: Line 295:
 
     <img class="fourC" src="https://static.igem.org/mediawiki/2017/8/84/T--HZAU-China--4C.png">
 
     <img class="fourC" src="https://static.igem.org/mediawiki/2017/8/84/T--HZAU-China--4C.png">
 
     <div>
 
     <div>
       <a id="anniu" href="#tiaozhuan"><img src="https://static.igem.org/mediawiki/2017/7/7e/T--HZAU-China--arrow.gif"></a>
+
       <a id="anniu" href="#tiaozhuan">
 +
        <img src="https://static.igem.org/mediawiki/2017/7/7e/T--HZAU-China--arrow.gif">
 +
      </a>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
   <div class="zhanshiqu">
+
   <div class="bianda">
     <!-- 大小齿轮们 -->
+
     <div class="zhanshiqu">
    <div class="hezi">
+
      <!-- 大小齿轮们 -->
      <div id="tiaozhuan"></div>
+
      <div class="hezi">
      <div class="chilun_1"></div>
+
        <div id="tiaozhuan"></div>
      <div class="chilun_2"></div>
+
        <div class="chilun_1"></div>
      <div class="chilun_3"></div>
+
        <div class="chilun_2"></div>
    </div>
+
        <div class="chilun_3"></div>
    <div class="frame">
+
      </div>
      <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/1/17/T--HZAU-China--frame.png" />
+
      <div class="frame">
    </div>
+
        <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/1/17/T--HZAU-China--frame.png" />
    <div id="rongqi">
+
      </div>
      <!-- 插入轮播的图片们 -->
+
      <div id="rongqi">
      <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/7/7b/T--HZAU-China--zhouqi1.gif" />
+
        <!-- 插入轮播的图片们 -->
      <img class="shiying" src="https://static.igem.org/mediawiki/2017/d/d9/T--HZAU-China--dCas91.gif" />
+
        <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/7/7b/T--HZAU-China--zhouqi1.gif" />
      <img class="shiying" src="https://static.igem.org/mediawiki/2017/3/35/T--HZAU-China--guangkong1.gif" />
+
        <img class="shiying" src="https://static.igem.org/mediawiki/2017/d/d9/T--HZAU-China--dCas91.gif" />
      <!-- 插入轮播的页码们 -->
+
        <img class="shiying" src="https://static.igem.org/mediawiki/2017/3/35/T--HZAU-China--guangkong1.gif" />
      <div>
+
        <!-- 插入轮播的页码们 -->
        <span class="yundong" name="0"></span>
+
        <div style="top: 568px;">
        <span name="1"></span>
+
          <span class="yundong" name="0"></span>
        <span name="2"></span>
+
          <span name="1"></span>
 +
          <span name="2"></span>
 +
        </div>
 +
        <!-- 插入图片的描述们 -->
 +
        <p class="yundong"></p>
 +
        <p></p>
 +
        <p></p>
 
       </div>
 
       </div>
      <!-- 插入图片的描述们 -->
 
      <p class="yundong"></p>
 
      <p></p>
 
      <p></p>
 
 
     </div>
 
     </div>
 
   </div>
 
   </div>
Line 359: Line 368:
  
 
     //每2s调用changeSlide函数进行图片轮播
 
     //每2s调用changeSlide函数进行图片轮播
     var slideon = setInterval(changeSlide, 8000);
+
     var slideon = setInterval(changeSlide, 60000);
  
 
     rongqi.onmouseover = function () {
 
     rongqi.onmouseover = function () {
Line 365: Line 374:
 
     }
 
     }
 
     rongqi.onmouseout = function () {
 
     rongqi.onmouseout = function () {
       slideon = setInterval(changeSlide, 8000); //当鼠标移出时重新开始轮播事件
+
       slideon = setInterval(changeSlide, 60000); //当鼠标移出时重新开始轮播事件
 
     }
 
     }
  

Revision as of 14:54, 1 November 2017