Jquery 固定为浏览器窗口宽度和固定纵横比的幻灯片放映隐藏下面的内容

我准备了一个幻灯片，里面有很大的图片和prev/next命令。 幻灯片始终适合于浏览器窗口（可调整大小），当图像调整大小时，它们保持纵横比

对于幻灯片，我使用了jQuery循环插件。 幻灯片效果很好，但我对内容有一个问题，内容必须始终放在幻灯片下方，但却隐藏在幻灯片容器下方（在我使用cycle插件之前，我有一个工作的slideshov，我只是使用简单的JS在容器中加载下一个图像。但是没有褪色效果，交换非常难看）

我想问题是没有为幻灯片声明高度。但是如果我想调整幻灯片大小，我不能声明高度

具有工作幻灯片但内容容器位置错误的实时示例：

具有正确容器位置且无幻灯片放映的实时示例：

我迷路了，任何帮助都会很好

我使用的代码是：

$(function() {
// retrieve list of slides from server
$.getJSON('slidelist.php', startSlideshow);

function startSlideshow(slides) {
    /* server returns an array of slides which looks like this:
    [
        'foto/02.jpg',
        'foto/03.jpg',
        'foto/04.jpg',
        'foto/05.jpg',
        'foto/06.jpg',
        'foto/07.jpg',
    ]
    */

    var totalSlideCount = 1 + slides.length;

    var $slideshow = $('#slideshow');

    // markup contains only a single slide; before starting the slideshow we 
    // append one slide and prepend one slide (to account for prev/next behavior)
    $slideshow.prepend('<img class="imgFotoPasica" src="'+slides.pop()+'" />');
    $slideshow.append('<img class="imgFotoPasica" src="'+slides.shift()+'" />');

    // start slideshow
    $('#slideshow').cycle({
        fx: 'fade',
        startingSlide: 1,  // start on the slide that was in the markup
        timeout:  0,
        speed:    800,
        prev:    '#prev',
        next:    '#next',
        before:   onBefore,
        containerResize: 0,  // resize container to fit largest slide - dodal zato, da se slika veča/manjša proporcionalno
        slideResize: 0,  // force slide width/height to fixed size before every transition - dodal zato, da se slika veča/manjša proporcionalno
        fit: 0,  // force slides to fit container - 0 izklopljeno 1 vklopljeno
    });

    function onBefore(curr, next, opts, fwd) {
        // on Before arguments:
        //  curr == DOM element for the slide that is currently being displayed
        //  next == DOM element for the slide that is about to be displayed
        //  opts == slideshow options
        //  fwd  == true if cycling forward, false if cycling backward

        // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
        if (!opts.addSlide)
            return;

        // have we added all our slides?
        if (opts.slideCount == totalSlideCount)
            return;

        // shift or pop from our slide array 
        var nextSlideSrc = fwd ? slides.shift() : slides.pop();

        // add our next slide
        opts.addSlide('<img class="imgFotoPasica" src="'+nextSlideSrc+'" />', fwd == false);
    };
}; 
});

$（函数（）{
//从服务器检索幻灯片列表
$.getJSON（'slidelist.php'，startSlideshow）；
功能启动幻灯片放映（幻灯片）{
/*服务器返回一组幻灯片，如下所示：
[
‘foto/02.jpg’，
‘foto/03.jpg’，
‘foto/04.jpg’，
‘foto/05.jpg’，
‘foto/06.jpg’，
‘foto/07.jpg’，
]
*/
var totalSlideCount=1+slides.length；
var$slideshow=$（“#slideshow”）；
//标记仅包含一张幻灯片；在开始幻灯片放映之前，我们
//追加一张幻灯片，并在幻灯片前加上一页（以说明上一页/下一页的行为）
$slideshow.prepend（“”）；
$slideshow.append（“”）；
//开始幻灯片放映
$（“#幻灯片放映”）。循环({
外汇：“淡出”，
开始幻灯片：1，//从标记中的幻灯片开始
超时：0，
速度:800,，
上一页：“#上一页”，
下一个：“#下一个”，
之前：onBefore，
容器大小：0，//调整容器大小以适合最大的幻灯片-dodal zato，da se slika veča/manjša Propocionalno
滑块尺寸：0，//在每次转换前将滑块宽度/高度强制为固定尺寸-dodal zato，da se slika veča/manjša Propocionalno
fit:0，//强制幻灯片以适应容器-0 izklopljeno 1 vklopljeno
});
函数onBefore（curr、next、opts、fwd）{
//在辩论之前：
//curr==当前正在显示的幻灯片的DOM元素
//下一步==将要显示的幻灯片的DOM元素
//选项==幻灯片放映选项
//fwd==向前循环时为true，向后循环时为false
//在第一个过程中，addSlide未定义（插件尚未创建fn）
如果（！opts.addSlide）
返回；
//我们添加了所有幻灯片了吗？
如果（opts.slideCount==totalSlideCount）
返回；
//从幻灯片阵列中移动或弹出
var nextSlideSrc=fwd？slides.shift（）：slides.pop（）；
//添加我们的下一张幻灯片
opts.addSlide（“”，fwd==false）；
};
}; 
});

---

头
所有内容，必须始终在幻灯片下方

在ops.addslide之后，请尝试以下操作：

$（'#ovojSlideshow'）.height（$（curr.height（））；

要捕获窗口调整大小事件，请执行以下操作：

$(window).resize(function() {
 $('#ovojSlideshow').height($(curr).height());
 // or you can change the width/etc
});

JS小提琴示例：

---

您会注意到我正在使用“窗口大小调整”事件来设置幻灯片的高度。我以您的项目为例，删除了不必要的组件来演示它。

在ops.addslide之后，请尝试以下操作：

$（'#ovojSlideshow'）.height（$（curr.height（））；

要捕获窗口调整大小事件，请执行以下操作：

$(window).resize(function() {
 $('#ovojSlideshow').height($(curr).height());
 // or you can change the width/etc
});

JS小提琴示例：

---

您会注意到我正在使用“窗口大小调整”事件来设置幻灯片的高度。我以您的项目为例，删除了不必要的组件来演示它。

您好，谢谢您的帮助。我插入了您的代码。但您的解决方案只有在单击“上一步/下一步”后才能生效。调整大小的问题仍然存在。如果我调整窗口大小如果没有刷新，幻灯片不会调整大小，请看：piana.si/test/，幻灯片下的一部分div隐藏在下面。如果我在上一篇文章中不清楚，我已将您的解决方案插入我在问题（）中发布的示例中。当然，如果有另一种方法来实现所需的行为，并且实现起来不太繁重（我不太擅长JS/jQuery和类似的编程）对我来说没问题。@myotisi您可以使用“窗口大小调整”事件来调整区域大小。.我已经更新了答案以反映这一点。我插入了您的代码，但它在第一页加载时不起作用，但只有在我手动调整窗口大小时才起作用。并且带有内容的Div仍然部分隐藏在幻灯片下方。例如：，JAVASCRIPT:，我甚至是tri我尝试了另一种方法，但这并不好。加载图像滞后，在第一页加载时淡入第一幅图像，等等（看：，和js：）您好，谢谢您的帮助。我已经插入了您的代码。但是您的解决方案只有在我单击“上一步/下一步”后才能工作。调整大小的问题仍然存在。如果我在不刷新的情况下调整窗口大小，幻灯片就不会调整大小，请看：piana.si/test/并且幻灯片下的一部分div隐藏在下面。如果我在上一篇文章中没有明确显示，则我已加入在我在问题（）中发布的示例中插入了您的解决方案。当然，如果有其他方法可以实现所需的行为，并且不太难实现（我不太擅长JS/jQuery和类似的编程）对我来说没问题。@myotisi您可以使用窗口调整大小事件来调整区域大小。.我已经更新了答案以反映这一点。我插入了您的代码，但它在第一页加载时不起作用，但只有在我手动重新加载时才起作用