我的Supersized幻灯片jQuery插件存在问题,该插件已合并到wordpress的模板'shuttershot'中。直到最近,它运作良好。现在,我的背景滑块图像不会调整到适当的窗口。经过许多Firebug调整并寻找答案后,我不确定这个问题。
下面是CSS。
* {
margin:0;
padding:0;
}
body {
background:#111;
}
img {
border:none;
}
#supersized-loader {
position:absolute;
top:50%;
left:50%;
z-index:10;
width:60px;
height:60px;
text-indent:-999em;
background-color:#111;
background:rgba(0,0,0,0.8) url(images/progress.gif) no-repeat center center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:-30px 0 0 -30px;
}
#supersized {
position:fixed;
overflow:hidden;
z-index:-999;
height:100%;
width:100%;
}
#supersized img {
width:auto;
height:auto;
position:fixed;
display:none;
outline:none;
border:none;
}
#supersized.speed img {
-ms-interpolation-mode:nearest-neighbor;
image-rendering:0;
}
#supersized.quality img {
-ms-interpolation-mode:bicubic;
image-rendering:optimizeQuality;
}
#supersized a {
z-index:-30;
position:absolute;
overflow:hidden;
top:0;
left:0;
width:100%;
height:100%;
background:#111;
}
#supersized a.prevslide {
z-index:-20;
}
#supersized a.activeslide {
z-index:-10;
}
#supersized a.prevslide img,#supersized a.activeslide img {
display:inline;
}
#controls-wrapper {
height:62px;
width:100%;
bottom:0;
left:0;
z-index:4;
background:url(../img/nav-bg.png) repeat-x;
position:fixed;
margin:0 auto;
}
#controls {
overflow:hidden;
height:100%;
text-align:left;
z-index:5;
padding:0 114px;
}
#slidecounter {
float:left;
color:#888;
font:23px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:700;
text-shadow:#000 0 -1px 0;
margin:19px 10px 18px 20px;
}
#slidecaption {
overflow:hidden;
float:left;
color:#FFF;
font:16px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:700;
text-shadow:#000 0 2px 0;
margin:23px 20px 23px 0;
}
#navigation {
float:right;
margin:10px 20px 0 0;
}
#nextthumb,#prevthumb {
z-index:6;
display:none;
position:fixed;
bottom:12px;
height:75px;
width:100px;
overflow:hidden;
background:#ddd;
border:2px solid #fff;
-webkit-box-shadow:0 0 5px #000;
}
#nextthumb {
right:12px;
}
#prevthumb {
left:12px;
}
#nextthumb img,#prevthumb img {
width:150px;
height:auto;
}
#nextthumb:active,#prevthumb:active {
bottom:10px;
}
#navigation > :hover,#nextthumb:hover,#prevthumb:hover {
cursor:pointer;
}