"
Team:HIT-Harbin/Templates/slider
From 2011.igem.org
<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(
);
}
- 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(
) 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(
);
}
- 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(
);
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>
<a href="#"><img src="
" alt="Picture_1" title="Picture_1" id="wows0"/></a>
<a href="#"><img src="
" alt="Picture_2" title="Picture_2" id="wows1"/></a>
<a href="#"><img src="
" alt="Picture_3" title="Picture_3" id="wows2"/></a>
<a href="#"><img src="
" alt="Picture_4" title="Picture_4" id="wows3"/></a>
<a href="#"><img src="
" alt="Picture_5" title="Picture_5" id="wows4"/></a>
<a href="#"><img src="
" alt="Picture_6" title="Picture_6" id="wows5"/></a>
<a href="#wows0" title="Picture_1"><img src="
" alt="Picture_1"/>1</a>
<a href="#wows1" title="Picture_2"><img src="
" alt="Picture_2"/>2</a>
<a href="#wows2" title="Picture_3"><img src="
" alt="Picture_3"/>3</a>
<a href="#wows3" title="Picture_4"><img src="
" alt="Picture_4"/>4</a>
<a href="#wows4" title="Picture_5"><img src="
" alt="Picture_5"/>5</a>
<a href="#wows5" title="Picture_6"><img src="
" alt="Picture_6"/>6</a>
<script type="text/javascript" src="https://2011.igem.org/Team:HIT-Harbin/script.js?action=raw&ctype=text/javascript"></script>
