Javascript 这个旋转木马的动态高度？

我有一个旋转木马，它将包含宽度相同但高度不同的图像。我不确定如何在不使用JS的情况下调整现有代码以满足这一要求。我还想指出，我的内容围绕着这个旋转木马的各个方面

目前，我已经硬编码了高度：390px在幻灯片中。我已尝试将其更改为

height:auto

但是它迫使旋转木马下面的所有内容向上移动了约375px（我已经给我的分页设置了15px的高度）

HTML:

JS:

---

通过更新

animateTransition

函数以首先检查图像高度（通过创建隐藏图像元素并检查其高度），您可以确定并设置

.slides

div的高度。只需将此位添加到该函数中：

$('body').append('<img style="position:absolute;top:0px;left:0px;visibility:hidden;" id="imgheight" src="'+$("#carousel .slides #slide" + nextSlide + ' img').attr('src')+'"/>');
var theheight=$('#imgheight').height();
$('#imgheight').remove();
$('.slides').height(theheight);

$（'body'）。追加（“”）；
var theheight=$（'#imgheight'）.height（）；
$（'#imgheight'）。删除（）；
$（'.slides'）。高度（theheight）；

JSFIDLE示例： （如果检查该元素，您将看到每次图像更改时都会设置

.slides

div的高度。）

---

快乐编码：）

通过更新

animateTransition

函数首先检查图像高度（通过创建隐藏图像元素并检查其高度），您可以确定并设置

幻灯片的高度。只需将此位添加到该函数中：

$('body').append('<img style="position:absolute;top:0px;left:0px;visibility:hidden;" id="imgheight" src="'+$("#carousel .slides #slide" + nextSlide + ' img').attr('src')+'"/>');
var theheight=$('#imgheight').height();
$('#imgheight').remove();
$('.slides').height(theheight);

$（'body'）。追加（“”）；
var theheight=$（'#imgheight'）.height（）；
$（'#imgheight'）。删除（）；
$（'.slides'）。高度（theheight）；

JSFIDLE示例：
（如果检查该元素，您将看到每次图像更改时都会设置
.slides
div的高度。）

快乐编码：）
有没有办法不使用高度属性？原因是我正在通过引导框架在一个响应迅速的网站上使用这个旋转木马，当它缩小到移动宽度时，定义一个高度会把网站搞得一团糟。据我所知，恐怕你不能。我明白你的意思-也许使用一个专用的移动网站？要使一个布局同时适用于手机和桌面是相当困难的。嗯。。。我会继续调查的。我正在使用引导，它根据浏览器的宽度调整内容的大小。缺点是你不能在任何东西上指定宽度/高度，否则这些列会看起来很难看。有没有办法不使用height属性？原因是我正在通过引导框架在一个响应迅速的网站上使用这个旋转木马，当它缩小到移动宽度时，定义一个高度会把网站搞得一团糟。据我所知，恐怕你不能。我明白你的意思-也许使用一个专用的移动网站？要使一个布局同时适用于手机和桌面是相当困难的。嗯。。。我会继续调查的。我正在使用引导，它根据浏览器的宽度调整内容的大小。缺点是不能在任何内容上指定宽度/高度，否则列将开始看起来很难看。
$(document).ready(function() {
    slidesArray = new Array();
    loadArray(slidesArray, 'slide', '#carousel .slides .slide');
    $("#carousel .pagination .pag").click(function() {
        var nextSlide = $(this).attr("id").replace("pag-slide", "");    
        animateTransition(nextSlide);
    });
    var slideTimer = setInterval(function() {
        fadeToNextSlide()
    }, 5000 );
});

function loadArray(array, prefix, path) {
    $(path).each(function(index) {
        array.push(prefix + (index + 1));
    });
}
function animateTransition(nextSlide) {
    $("#carousel .slides .opaque").addClass('tempOpaque');
    $("#carousel .slides .slide").removeClass("opaque");
    setTimeout(function(){
        $('#carousel .slides .slide.tempOpaque').removeClass('tempOpaque');
    },300);
    $("#carousel .slides #slide" + nextSlide).addClass("opaque");
    $("#carousel .pagination .pag").removeClass("selected");
    $('#carousel #pag-slide' + nextSlide).addClass("selected");   
}
function fadeToNextSlide() {
    var currentSlide = $('#carousel .slides .opaque').attr('id');
    var nextSlide = $.inArray(currentSlide, slidesArray) + 2;
    if (nextSlide > slidesArray.length) {
        nextSlide = 1;
    }
    animateTransition(nextSlide);
}

$('body').append('<img style="position:absolute;top:0px;left:0px;visibility:hidden;" id="imgheight" src="'+$("#carousel .slides #slide" + nextSlide + ' img').attr('src')+'"/>');
var theheight=$('#imgheight').height();
$('#imgheight').remove();
$('.slides').height(theheight);