Question

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

对于幻灯片，我使用了jQuery Cycle Plugin。幻灯片显示效果不错，但我的内容问题必须始终在幻灯片放映下，而是隐藏隐藏在幻灯片容器之下（在使用循环插件之前我有一个工作幻灯片，我只是使用简单的JS来加载scontainer中的下一个图像。但是没有淡入淡出效果，并且交换非常难看。

我认为问题在于幻灯片没有声明高度。但是如果我想要幻灯片调整大小，我无法宣布高度。

包含工作幻灯片但内容容器位置错误的实际示例：HERE。

具有正确容器位置且无幻灯片显示的实例：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>

Answer 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/

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

幻灯片固定到浏览器窗口宽度和固定宽高比隐藏下面的内容

1 个答案: