固定到浏览器窗口宽度和固定高宽比的幻灯片隐藏下面的内容
固定到浏览器窗口宽度和固定高宽比的幻灯片隐藏下面的内容
提问于 2012-09-21 10:20:35
我已经准备了一个幻灯片，其中包含了非常大的图像和prev/next命令。幻灯片总是适合浏览器窗口(是可调整大小的)，当图像调整大小时，它们保持高宽比。
在幻灯片中，我使用了jQuery循环插件。幻灯片运行良好，但我的内容必须总是在幻灯片下面，但却隐藏在幻灯片容器下面(在使用循环插件之前，我使用了一个工作幻灯片，我只是使用简单的JS来加载容器中的下一个图像。但并没有褪色效应，而且掉期真的很难看)。
我认为问题是，幻灯片没有宣布高度。但是如果我想要调整幻灯片的大小，我不能声明一个高度。
一个具有工作幻灯片但内容容器位置错误的实例：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>回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-21 17:14:45
在ops.addslide之后，尝试如下：
$('#ovojSlideshow').height($(curr).height());
要捕获窗口事件上的调整大小：
$(window).resize(function() {
$('#ovojSlideshow').height($(curr).height());
// or you can change the width/etc
});JS Fiddle示例：http://jsfiddle.net/lucuma/CqJDy/
您会注意到我正在使用窗口调整大小事件来设置幻灯片上的高度。我以您的项目为例，删除了不必要的组件来演示它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12528662
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号