0

同じ幅で高さが異なる画像を含むカルーセルがあります。JSに頼らずに、この要件に合うように既存のコードをどのように適応させるかはわかりません。また、このカルーセルをあらゆる面で取り巻くコンテンツがあることにも注意したいと思います。

現在、height:390px;.slidesにハードコーディングしています。これをに変更しようとしましたheight:auto;が、カルーセルの下のすべてのコンテンツが最大375ピクセル上に移動しました（ページネーションの高さを15ピクセルにしました）。

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 / LESS：

#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);
}
4

1 に答える 1

3

関数を更新してanimateTransition最初に画像の高さを確認することにより（非表示の画像要素を作成してその高さを確認することにより）、.slidesdivの高さを決定および設定できます。このビットをその関数に追加するだけです。

$('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.slides ：//jsfiddle.net/QvZLg/4/（要素を調べると、画像が変更されるたび にdivの高さが設定されていることがわかります。）

ハッピーコーディング:)

于 2012-09-27T21:14:28.003 に答える