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; | ||
− | |||
} | } | ||
/*-- 轮播图主体样式-- */ | /*-- 轮播图主体样式-- */ | ||
+ | |||
+ | .bianda { | ||
+ | width: 1200px; | ||
+ | margin: 300px auto 0 auto; | ||
+ | } | ||
#rongqi { | #rongqi { | ||
width: 950px; | width: 950px; | ||
height: 600px; | height: 600px; | ||
− | margin: | + | 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: | + | width: 50px; |
− | height: | + | height: 25px; |
− | margin: 0 | + | margin: 0 10px; |
− | border-radius: | + | 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: | + | 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=" | + | <div class="bianda"> |
− | <!-- 大小齿轮们 --> | + | <div class="zhanshiqu"> |
− | + | <!-- 大小齿轮们 --> | |
− | + | <div class="hezi"> | |
− | + | <div id="tiaozhuan"></div> | |
− | + | <div class="chilun_1"></div> | |
− | + | <div class="chilun_2"></div> | |
− | + | <div class="chilun_3"></div> | |
− | + | </div> | |
− | + | <div class="frame"> | |
− | + | <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/1/17/T--HZAU-China--frame.png" /> | |
− | + | </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="shiying" src="https://static.igem.org/mediawiki/2017/3/35/T--HZAU-China--guangkong1.gif" /> | |
− | + | <!-- 插入轮播的页码们 --> | |
− | + | <div style="top: 568px;"> | |
− | + | <span class="yundong" name="0"></span> | |
− | + | <span name="1"></span> | |
+ | <span name="2"></span> | ||
+ | </div> | ||
+ | <!-- 插入图片的描述们 --> | ||
+ | <p class="yundong"></p> | ||
+ | <p></p> | ||
+ | <p></p> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 359: | Line 368: | ||
//每2s调用changeSlide函数进行图片轮播 | //每2s调用changeSlide函数进行图片轮播 | ||
− | var slideon = setInterval(changeSlide, | + | var slideon = setInterval(changeSlide, 60000); |
rongqi.onmouseover = function () { | rongqi.onmouseover = function () { | ||
Line 365: | Line 374: | ||
} | } | ||
rongqi.onmouseout = function () { | rongqi.onmouseout = function () { | ||
− | slideon = setInterval(changeSlide, | + | slideon = setInterval(changeSlide, 60000); //当鼠标移出时重新开始轮播事件 |
} | } | ||
Revision as of 14:54, 1 November 2017