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

Question

我有一个旋转木马，其中包含宽度相同但高度不同的图像。我不确定如何在不求助于 JS 的情况下调整现有代码以满足此要求。我还想指出，我在这个轮播的各个方面都有内容。

目前，我在 .slides 中对 height:390px; 进行了硬编码。我尝试将其更改为 height:auto; 但它迫使轮播下方的所有内容向上移动 ~375px(我已将分页高度设置为 15px)。

HTML:

<div id="carousel">
    <div class="slides">
        <div id="slide1" class="slide opaque">
            <img src="http://www.placehold.it/630x390">
            <div class="content">
                <div class="text">Slide01</div>
            </div>
        </div>
        <div id="slide2" class="slide">
            <img src="http://www.placehold.it/630x390">
            <div class="content">
                <div class="text">Slide01</div>
            </div>
        </div>
        <div id="slide3" class="slide">
            <img src="http://www.placehold.it/630x390">
            <div class="content">
                <div class="text">Slide01</div>
            </div>
        </div>
    </div>
    <ul class="pagination">
        <li id="pag-slide1" class="pag selected"></li>
        <li id="pag-slide2" class="pag"></li>
        <li id="pag-slide3" class="pag"></li>
    </ul>
</div> 

CSS/更少:

#carousel {
    -moz-box-shadow: 0 2px 4px #777;
    -webkit-box-shadow: 0 2px 4px #777;
    box-shadow: 0 2px 4px #777;
    width: 630px;

    div.slides {
        position: relative; 
        float: left; 
        display: block; 
        width: 100%;
        height: 390px;
        margin: 0; 

        .slide {
            position: absolute; 
            left: 0; 
            -webkit-transition: opacity 1s ease-in-out;
            -moz-transition: opacity 1s ease-in-out; 
            -o-transition: opacity 1s ease-in-out; 
            -ms-transition: opacity 1s ease-in-out; 
            transition: opacity 1s ease-in-out; 
            opacity: 0; 
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
            filter: alpha(opacity=0); 

            img {
                border-top-left-radius:5px 5px;
                border-top-right-radius:5px 5px;
                border-bottom-left-radius:5px 5px;
                border-bottom-right-radius:5px 5px;
            }

            .content {
                color: white;
                font-weight: bold;
                z-index: 10;
                position: absolute;

                bottom: 40px;
                width: 100%;
                text-align: center;


                .text {
                    padding: 0 0 20px 0;
                }
            }
        }

        .slide.opaque, .slide.tempOpaque {
            opacity: 1; 
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; 
            filter: alpha(opacity=1);
        }   
    }

    ul.pagination { 
        padding: 0;
        margin: 0 auto;
        width: 200px;
        text-align: center;
        list-style-type: none; 
        position: relative; 
        top: -25px; 
        z-index: 9; 

        .pag {
            width: 15px; 
            height: 15px; 
            background: url(images/pagination.png) 0 0 no-repeat;
            position: relative; 
            display: inline-block; 
            margin: 0; 
            padding: 0;

            cursor: hand; cursor: pointer;
        }

        .pag.selected { 
            background:url(images/pagination.png) 0 -16px no-repeat;
        }
    }
}

JS:

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

Answer 1

通过更新您的 animateTransition 函数以首先检查图像高度(通过创建一个隐藏的图像元素并检查其高度)，您可以确定并设置 .slides 的高度 分区。只需将此位添加到该函数中:

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

JsFiddle 示例:http://jsfiddle.net/QvZLg/4/(如果您检查该元素，您会发现每次图像更改时都会设置 .slides div 的高度。)

快乐编码:)