1

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

对于幻灯片，我使用了 jQuery Cycle 插件。幻灯片运行良好，但我对必须始终位于幻灯片下方但隐藏在幻灯片容器下方的内容存在问题（在使用循环插件之前，我有一个工作幻灯片，我只是使用简单的 JS在 scontainer 中加载下一张图像。但是没有淡入淡出效果，而且交换真的很难看）。

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

带有工作幻灯片但内容容器位置错误的现场示例：HERE。

具有正确容器位置且没有幻灯片的实时示例：这里

我很迷茫，任何帮助都会很棒。

我使用的代码：

$(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);
    };
}; 
});

<!doctype html>
<html lang="hr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/css.css"/>
</head>

<body>
    <div id="ovoj">
        <div id="glava"><h1>HEAD</h1></div>
        <div id="ovojSlideshow">
            <div>
                <a href="#"><span id="prev">Prev</span></a>
                <a href="#"><span id="next">Next</span></a>
            </div>
            <div id="slideshow">
                <img class="imgFotoPasica" src="foto/01.jpg" />
            </div>
        </div>
        <div id="vsebina"><h1>ALL CONTENT, HAVE TO BE ALWAYS UNDER THE SLIDESHOW</h1></div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/SlideShow_01.js"></script>
</body>
</html>
4

1 回答 1

1

在 ops.addslide 之后试试这个：
$('#ovojSlideshow').height($(curr).height());

要捕获窗口事件的调整大小：

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

JS 小提琴示例：http: //jsfiddle.net/lucuma/CqJDy/

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

于 2012-09-21T17:14:45.090 回答