Team:HIT-Harbin/Templates/slider

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<div id="wowslider-container1">
+
<head>
 +
<style type="text/css">
 +
/* 设置slider */
 +
#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>
 +
/* 设置导slider结束 */
 +
<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>
 +
</head>
 +
<body>
 +
<div id="wowslider-container1">
<div class="ws_images">
<div class="ws_images">
<a href="#"><img src="https://static.igem.org/mediawiki/2011/2/27/HIT-Harbin_picture1.jpg" alt="Picture_1" title="Picture_1" id="wows0"/></a>
<a href="#"><img src="https://static.igem.org/mediawiki/2011/2/27/HIT-Harbin_picture1.jpg" alt="Picture_1" title="Picture_1" id="wows0"/></a>
Line 22: Line 192:
<!-- End WOWSlider.com BODY section -->
<!-- End WOWSlider.com BODY section -->
 +
</body>
</html>
</html>

Revision as of 19:10, 4 October 2011

/* 设置导slider结束 */

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