Team:HIT-Harbin/Templates/slider

From 2011.igem.org

(Difference between revisions)
 
(16 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<div id="wowslider-container1">
+
<style type="text/css">
-
<div class="ws_images">
+
#wowslider-container1 .ws_bullets {
-
<a href="#"><img src="https://static.igem.org/mediawiki/2011/5/51/Picture_1.jpg" alt="1" title="" id="wows0"/></a>
+
    bottom: 18px;
-
<a href="#"><img src="https://static.igem.org/mediawiki/2011/d/dd/Picture_2.jpg" alt="4" title="" id="wows1"/></a>
+
left:50%;
-
<a href="#"><img src="https://static.igem.org/mediawiki/2011/4/49/Picture_3.jpg" alt="5" title="" id="wows2"/></a>
+
}
-
<a href="#"><img src="https://static.igem.org/mediawiki/2011/e/ee/Picture_4.jpg" alt="6" title="" id="wows3"/></a>
+
#wowslider-container1  .ws_bullets div{
-
<a href="#"><img src="https://static.igem.org/mediawiki/2011/5/58/Picture_5.jpg" alt="3" title="" id="wows4"/></a>
+
left:-50%;
-
<a href="#"><img src="https://static.igem.org/mediawiki/2011/e/e3/Picture_6.jpg" alt="2" title="" id="wows5"/></a>
+
}
-
</div>
+
#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;
 +
}
-
<div class="ws_bullets">
+
#wowslider-container1 .ws_images img{
-
<div>
+
top:0;
-
<a href="#wows0" title="1"><img src="https://static.igem.org/mediawiki/2011/7/71/HIT-Harbin_pic_1.jpg" alt="1"/>1</a>
+
left:0;
-
<a href="#wows1" title="4"><img src="https://static.igem.org/mediawiki/2011/1/1f/HIT-Harbin_pic_2.jpg" alt="4"/>2</a>
+
border:none 0;
-
<a href="#wows2" title="5"><img src="https://static.igem.org/mediawiki/2011/6/6a/HIT-Harbin_pic_3.jpg" alt="5"/>3</a>
+
}
-
<a href="#wows3" title="6"><img src="https://static.igem.org/mediawiki/2011/b/be/HIT-Harbin_pic_4.jpg" alt="6"/>4</a>
+
#wowslider-container1 a{
-
<a href="#wows4" title="3"><img src="https://static.igem.org/mediawiki/2011/8/85/HIT-Harbin_pic_5.jpg" alt="3"/>5</a>
+
text-decoration: none;
-
<a href="#wows5" title="2"><img src="https://static.igem.org/mediawiki/2011/a/ad/HIT-Harbin_pic_6.jpg" alt="2"/>6</a>
+
outline: none;
-
</div>
+
border: none;
-
  </div>
+
}
-
</div>
+
-
<script type="text/javascript" src="https://2011.igem.org/Team:HIT-Harbin/script.js?action=raw&ctype=text/javascript"></script>
+
 +
#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 class="ws_images">
 +
<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="Picture_2" title="" id="wows1"/></a>
 +
<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="Picture_4" title="" id="wows3"/></a>
 +
<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="Picture_6" title="" id="wows5"/></a>
 +
</div>
 +
<div class="ws_bullets"><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="#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="#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="#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="#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="#wows5" title="Picture_6"><img src="https://static.igem.org/mediawiki/2011/a/ad/HIT-Harbin_pic_6.jpg" alt="Picture_6"/>6</a>
 +
</div></div>
 +
</div>
 +
        <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

Picture_1 Picture_2 Picture_3 Picture_4 Picture_5 Picture_6
Picture_11 Picture_22 Picture_33 Picture_44 Picture_55 Picture_66

Retrieved from "http://2011.igem.org/Team:HIT-Harbin/Templates/slider"