超大jQuery幻灯片放到特定的<div>

Question

任何想法如何使Supersize jQuery幻灯片在特定的<div>而不是整个主体中起作用？ 这里的另一个线程建议添加一个<div id="supersized"> ，它的投票数为0，对我也不起作用。 目前，它正在忽略所有其他元素，并停留在后台。

Answer 1

这是jQuery for Supersized的第一行；

(function(a){a(document).ready(function(){
a("body").append('<div id="supersized-loader"></div><ul id="supersized"></ul>')
});

基于此，如果您不想全屏使用它，他们会在文档中告诉您执行以下操作：

您可以通过调整CSS文件中的#supersized样式来定义尺寸。 您将要使position：fixed-> position：absolute的所有实例。

Answer 2

无需创建或添加另一个div。 只需将位置从固定设置为绝对即可。 背景图片将从顶部开始。 您可以自上而下调整位置，因为它是绝对格。

Answer 3

我将在supersized.css和supersized.shutter.css下找到的大约4或5个位置属性从固定更改为绝对，这使您可以在图像幻灯片下方添加内容。

Answer 4

我遇到了同样的问题，本教程为我节省了http://arushad.org/how-to-use-supersized-inside-a-div-for-a-background-image-slideshow/

Answer 5

您可以将以下内容用作样式表，请勿使用插件随附的supersized.css文件

/**************************************** BEGIN: slider *************************************************/
.slider{
    position:relative;
    height:100%;
}
#slidecounter,
#slidecaption{
    overflow:hidden;
    color:#FFF;
    font-size:13px;
    text-transform:capitalize;
    padding:10px 13px;
    line-height:15px;
    position:absolute;
    top:112px;
    right:25px;
    z-index:5;
    background-color:#fff;
    color:#565656;
    font-family: 'Oswald', sans-serif;
    letter-spacing:0.05em;
    border-bottom:2px solid #bdbdbd;
    display:block;
}

ul#slide-list{
    float:right; 
    height:25px; 
    bottom:25px; 
    right:25px; 
    z-index:9999999; 
    position:absolute;
}
ul#slide-list li{
    list-style:none; 
    width:15px; 
    height:15px; 
    float:left; 
    margin-left:5px;
}
ul#slide-list li:first-child{margin:0;}
ul#slide-list li.current-slide a, 
ul#slide-list li a:hover{background-color:#fff;}
ul#slide-list li a{
    display:block; 
    width:15px; 
    height:15px; 
    background-color:#eee; 
    background-color:rgba(255,255,255,0.6); 
    cursor:pointer;
}

#progress-back{
    z-index:5; 
    position:absolute; 
    bottom:0px; 
    left:0; 
    height:5px; 
    width:100%; 
    background:url(../images/progress-back.png) repeat-x;
}
#progress-bar{
    position:relative; 
    height:5px; 
    width:100%;
    background:#666666;
}

#supersized-loader{
    position:absolute; 
    top:50%; 
    left:50%; 
    z-index:0; 
    width:60px; 
    height:60px; 
    margin:-30px 0 0 -30px; 
    text-indent:-999em; 
    background:url(../images/progress.gif) no-repeat center center;
}
#supersized{
    display:block; 
    position:absolute; 
    left:0; top:0; 
    overflow:hidden; 
    z-index:1; 
    height:100%; 
    width:100%;
}
#supersized img{
    width:auto; 
    height:auto; 
    position:relative; 
    display:none; 
    outline:none; 
    border:none; 
}
#supersized.speed img{
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering: -moz-crisp-edges;
}
#supersized.quality img{
    -ms-interpolation-mode:bicubic; 
    image-rendering: optimizeQuality;
}
#supersized li{
    display:block; 
    list-style:none; 
    z-index:-30; 
    position:absolute; 
    overflow:hidden; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#111;
}
#supersized a{
    width:100%; 
    height:100%; 
    display:block; 
}
#supersized li.prevslide{z-index:-20;}
#supersized li.activeslide{z-index:-10;}
#supersized li.image-loading{
    background:#111 url(../img/progress.gif) no-repeat center center; 
    width:100%; 
    height:100%; 
}
#supersized li.image-loading img{visibility:hidden;}
#supersized li.prevslide img, #supersized li.activeslide img{display:inline;}

#prevslide, #nextslide{ position:absolute; height:45px; width:45px; top:50%; margin-top:-23px; opacity:0.3; z-index:2; }
#prevslide{ left:10px; background:url(../images/back.png); }
#nextslide{ right:10px; background:url(../images/forward.png); }
#prevslide:active, #nextslide:active{ margin-top:-19px; }
#prevslide:hover, #nextslide:hover{ cursor:pointer; }
/**************************************** END: slider *************************************************/