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

Question

知道如何让Supersize jQuery slideshow 在特定的<div> 中工作而不是整个身体吗？这里的另一个线程建议添加一个 <div id="supersized"> ，它有 0 个赞成票，对我也不起作用。目前它忽略了所有其他元素并停留在后台。

Answer 1

这是 Supersized 的 jQuery 的第一行；

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

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

您可以通过调整 CSS 文件中的#supersized 样式来定义尺寸。 您将希望创建所有位置实例：固定 -> 位置：绝对。

Answer 2

无需创建或添加另一个 div。只需将位置从固定设置为绝对。背景图像将从顶部开始。您可以使用顶部或左侧调整位置，因为它是绝对 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 *************************************************/