Team:HIT-Harbin/Templates/slider
From 2011.igem.org
(Difference between revisions)
(24 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | <html> | + | <html> |
+ | <style type="text/css"> | ||
+ | #wowslider-container1 .ws_bullets { | ||
+ | bottom: 18px; | ||
+ | left:50%; | ||
+ | } | ||
+ | #wowslider-container1 .ws_bullets div{ | ||
+ | left:-50%; | ||
+ | } | ||
+ | #wowslider-container1 { | ||
+ | /* overflow: hidden; */ | ||
+ | zoom: 1; | ||
+ | position: relative; | ||
+ | width:980px; | ||
+ | height:386px; | ||
+ | margin:0 auto; | ||
+ | z-index:100; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2011/2/2a/HIT-Harbin_bg.png); | ||
+ | } | ||
+ | #wowslider-container1 .ws_images{ | ||
+ | position: absolute; | ||
+ | left:10px; | ||
+ | top:9px; | ||
+ | width:960px; | ||
+ | height:360px; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #wowslider-container1 .ws_images a{ | ||
+ | color:transparent; | ||
+ | } | ||
+ | |||
+ | #wowslider-container1 .ws_images img{ | ||
+ | top:0; | ||
+ | left:0; | ||
+ | border:none 0; | ||
+ | } | ||
+ | #wowslider-container1 a{ | ||
+ | text-decoration: none; | ||
+ | outline: none; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | #wowslider-container1 .ws_bullets { | ||
+ | font-size: 0px; | ||
+ | padding: 10px; | ||
+ | float: left; | ||
+ | position:absolute; | ||
+ | z-index:70; | ||
+ | } | ||
+ | #wowslider-container1 .ws_bullets div{ | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | } | ||
+ | #wowslider-container1 .ws_bullets a { | ||
+ | width:15px; | ||
+ | height:15px; | ||
+ | background: url(https://static.igem.org/mediawiki/2011/5/53/HIT-Harbin_bullet.png) left top; | ||
+ | float: left; | ||
+ | text-indent: -1000px; | ||
+ | position:relative; | ||
+ | margin-left:3px; | ||
+ | } | ||
+ | #wowslider-container1 .ws_bullets a:hover{ | ||
+ | background-position: 0 50%; | ||
+ | } | ||
+ | #wowslider-container1 .ws_bullets a.ws_selbull{ | ||
+ | background-position: 0 100%; | ||
+ | } | ||
+ | #wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { | ||
+ | position:absolute; | ||
+ | display:none; | ||
+ | top:50%; | ||
+ | margin-top:-15px; | ||
+ | z-index:60; | ||
+ | height: 45px; | ||
+ | width: 45px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2011/b/bc/HIT-Harbin_arrows.png); | ||
+ | } | ||
+ | #wowslider-container1 a.ws_next{ | ||
+ | background-position: 100% 0; | ||
+ | right:21px; | ||
+ | } | ||
+ | #wowslider-container1 a.ws_prev { | ||
+ | left:21px; | ||
+ | background-position: 0 0; | ||
+ | } | ||
+ | * html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block} | ||
+ | #wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev {display:block} | ||
+ | |||
+ | #wowslider-container1 .ws-title{ | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | bottom: 26px; | ||
+ | left: 20px; | ||
+ | margin-right:25px; | ||
+ | padding:15px; | ||
+ | background:#FFFFFF; | ||
+ | color:#333333; | ||
+ | z-index: 50; | ||
+ | font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; | ||
+ | font-size: 14px; | ||
+ | opacity:0.8; | ||
+ | border-radius:5px; | ||
+ | -moz-border-radius:5px; | ||
+ | -webkit-border-radius:5px; | ||
+ | filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); | ||
+ | } | ||
+ | |||
+ | #wowslider-container1 .ws-title div{ | ||
+ | padding-top:5px; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | #wowslider-container1 .ws_bullets a img{ | ||
+ | text-indent:0; | ||
+ | display:block; | ||
+ | bottom:20px; | ||
+ | left:-120px; | ||
+ | visibility:hidden; | ||
+ | position:absolute; | ||
+ | -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | border: 4px solid #FFF; | ||
+ | border-radius:5px; | ||
+ | -moz-border-radius:5px; | ||
+ | } | ||
+ | #wowslider-container1 .ws_bullets a:hover img{ | ||
+ | visibility:visible; | ||
+ | } | ||
+ | |||
+ | #wowslider-container1 .ws_bulframe div div{ | ||
+ | height:90px; | ||
+ | overflow:visible; | ||
+ | position:relative; | ||
+ | } | ||
+ | #wowslider-container1 .ws_bulframe div { | ||
+ | left:0; | ||
+ | overflow:hidden; | ||
+ | position:relative; | ||
+ | width:240px; | ||
+ | } | ||
+ | #wowslider-container1 .ws_bullets .ws_bulframe{ | ||
+ | display:none; | ||
+ | bottom:18px; | ||
+ | overflow:visible; | ||
+ | position:absolute; | ||
+ | cursor:pointer; | ||
+ | -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | border: 4px solid #FFF; | ||
+ | border-radius:5px; | ||
+ | -moz-border-radius:5px; | ||
+ | } | ||
+ | #wowslider-container1 .ws_bulframe span{ | ||
+ | display:block; | ||
+ | position:absolute; | ||
+ | bottom:-10px; | ||
+ | margin-left:-4px; | ||
+ | left:120px; | ||
+ | background:url(https://static.igem.org/mediawiki/2011/0/08/HIT-Harbin_triangle.png); | ||
+ | width:15px; | ||
+ | height:6px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <style type="text/css">a#vlb{display:none}</style> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:HIT-Harbin/slider_jquery.js?action=raw&ctype=text/javascript"></script> | ||
+ | |||
<div id="wowslider-container1"> | <div id="wowslider-container1"> | ||
<div class="ws_images"> | <div class="ws_images"> | ||
- | <a href="#"><img src="https://static.igem.org/mediawiki/2011/5/51/Picture_1.jpg" alt=" | + | <a href="#"><img src="https://static.igem.org/mediawiki/2011/5/51/Picture_1.jpg" alt="Picture_1" title="" id="wows0"/></a> |
- | <a href="#"><img src="https://static.igem.org/mediawiki/2011/d/dd/Picture_2.jpg" alt=" | + | <a href="#"><img src="https://static.igem.org/mediawiki/2011/d/dd/Picture_2.jpg" alt="Picture_2" title="" id="wows1"/></a> |
- | <a href="#"><img src="https://static.igem.org/mediawiki/2011/4/49/Picture_3.jpg" alt=" | + | <a href="#"><img src="https://static.igem.org/mediawiki/2011/4/49/Picture_3.jpg" alt="Picture_3" title="" id="wows2"/></a> |
- | <a href="#"><img src="https://static.igem.org/mediawiki/2011/e/ee/Picture_4.jpg" alt=" | + | <a href="#"><img src="https://static.igem.org/mediawiki/2011/e/ee/Picture_4.jpg" alt="Picture_4" title="" id="wows3"/></a> |
- | <a href="#"><img src="https://static.igem.org/mediawiki/2011/5/58/Picture_5.jpg" alt=" | + | <a href="#"><img src="https://static.igem.org/mediawiki/2011/5/58/Picture_5.jpg" alt="Picture_5" title="" id="wows4"/></a> |
- | <a href="#"><img src="https://static.igem.org/mediawiki/2011/e/e3/Picture_6.jpg" alt=" | + | <a href="#"><img src="https://static.igem.org/mediawiki/2011/e/e3/Picture_6.jpg" alt="Picture_6" title="" id="wows5"/></a> |
</div> | </div> | ||
- | <div class="ws_bullets"> | + | <div class="ws_bullets"><div> |
- | <div> | + | <a href="#wows0" title="Picture_1"><img src="https://static.igem.org/mediawiki/2011/7/71/HIT-Harbin_pic_1.jpg" alt="Picture_1"/>1</a> |
- | <a href="#wows0" title=" | + | <a href="#wows1" title="Picture_2"><img src="https://static.igem.org/mediawiki/2011/1/1f/HIT-Harbin_pic_2.jpg" alt="Picture_2"/>2</a> |
- | <a href="#wows1" title=" | + | <a href="#wows2" title="Picture_3"><img src="https://static.igem.org/mediawiki/2011/6/6a/HIT-Harbin_pic_3.jpg" alt="Picture_3"/>3</a> |
- | <a href="#wows2" title=" | + | <a href="#wows3" title="Picture_4"><img src="https://static.igem.org/mediawiki/2011/b/be/HIT-Harbin_pic_4.jpg" alt="Picture_4"/>4</a> |
- | <a href="#wows3" title=" | + | <a href="#wows4" title="Picture_5"><img src="https://static.igem.org/mediawiki/2011/8/85/HIT-Harbin_pic_5.jpg" alt="Picture_5"/>5</a> |
- | <a href="#wows4" title=" | + | <a href="#wows5" title="Picture_6"><img src="https://static.igem.org/mediawiki/2011/a/ad/HIT-Harbin_pic_6.jpg" alt="Picture_6"/>6</a> |
- | <a href="#wows5" title=" | + | |
</div></div> | </div></div> | ||
</div> | </div> | ||
- | <script type="text/javascript" src="https://2011.igem.org/Team:HIT-Harbin/script.js?action=raw&ctype=text/javascript"></script> | + | <script type="text/javascript" src="https://2011.igem.org/Team:HIT-Harbin/script.js?action=raw&ctype=text/javascript"></script> |
- | + | ||
</html> | </html> |
Latest revision as of 01:00, 6 October 2011