jquery - 如何动态更改 Jquery 轮播中焦点项目的高度？

Question

概括 -

我Jcarousel jquery plugin用来浏览项目列表。根据我们可以在各处找到的大多数示例，这些项目不是图像/图片。我的物品是帖子，它们的高度可能不同。尽管进行了几次尝试，但我无法正确地做到这一点。

HTML结构

        <div class="div1">          
            <div class="div2">
                <div class="jcarousel">
                    <ul>
                        <li>
                           <div class="item">ITEM 1</div>div>
                        </li>
                        <li>
                           <div class="item">ITEM n</div>div>
                        </li>
                    </ul>
                </div>
              <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
              <a href="#" class="jcarousel-control-next">&rsaquo;</a>
            </div>
        </div>

<ul>尽管我无法使其工作，但其中的每个项目都将具有不同的高度。我希望根据每个内部<div class="jcarousel">的高度动态改变它的高度。<div><li>

CSS

       .div1 {
        height: auto;
        background: none repeat scroll 0% 0% rgb(255, 255, 255);
        border-width: medium 1px 1px;
        border-style: none solid solid;
        border-color: -moz-use-text-color rgb(255, 255, 255) rgb(255, 255, 255);
        padding: 20px 20px 0px;
        margin-bottom: 50px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.46);
    }

    .div2 {
        margin-top: -50px;
    }

    .jcarousel {
        position: relative;
        overflow: hidden;
        height: 700px;
        margin: 0px -20px;
        padding: 0px 20px;
    }

    .jcarousel ul {
        width: 20000em;
        position: absolute;
        list-style: none outside none;
        margin: 0px;
        padding: 0px;
    }


    .jcarousel li {
        float: left;
        width: 480px;
    }

    .item {
        margin: 0px;
        padding: 0px 20px;
        height: 100%;
    }

JS（试图克服高度问题。不确定这段代码是否会以某种方式影响 Jcarousel.js。不幸的是，这有时会正确地改变高度。大多数情况下，如果保持以前的高度，保持它，或者再次错误地改变方法）

       <script type="text/javascript">
        $(document).ready(function(){


              // checking the height of the first element in the <ul>
             var count = 0;
             var count_max = $(".jcarousel li").length;


             var initial_height = $(".jcarousel ul li:eq("+count+") div.item").height(); 
             $(".jcarousel").height(initial_height);


             // changing height when pressing the prev control
             $(document).on("click",".jcarousel-control-prev", function(){
                if (count == 0) {

                } else {
                    count = count-1;
                    var new_count = $(".jcarousel li:eq("+count+") div.item").height();
                    $(".jcarousel").height(new_count);
                }
             });

            // changing height when pressing the next control
             $(document).on("click",".jcarousel-control-next", function(){
                if (count !== count_max) {
                    count = count+1;
                    var new_count = $(".jcarousel li:eq("+count+") div.item").height();
                    $(".jcarousel").height(new_count);



                } else {
                    // trying to update the counter when reach the last <li> element within the <ul>
                    count = 0;
                    var initial_height = $(".jcarousel ul li:eq("+count+") div.item").height();
                    $(".jcarousel").height(initial_height);

                }


            });



        });
        </script>

Answer 1

您是否尝试过overflow:auto在父 div 中使用？

Answer 2

在尝试了一些事情之后，我想出了以下解决方案：

我意识到预先创建一个具有所有高度的数组，<ul><li>它的响应速度足够快，可以正确更新.Jcarousel div.

JS

      <script type="text/javascript">
            $(document).ready(function(){


                  // checking the height of the first element in the <ul>
                 var count = 0;
                 var count_max = $(".jcarousel li").length;


                 var alturas = [];

                  $(".jcarousel li div.cenario").each(function(){
                        var height = $(this).height();
                        alturas.push(height);
                  });

                 $(".jcarousel").css('height',alturas[count]);


                 // changing height when pressing the prev control
                 $(document).on("click",".jcarousel-control-prev", function(){
                    if (count == 0) {

                    } else {
                        count = count-1;
                        $(".jcarousel").css('height',alturas[count]);
                    }
                 });

                // changing height when pressing the next control
                 $(document).on("click",".jcarousel-control-next", function(){
                    if (count !== count_max) {
                        count = count+1;
                       $(".jcarousel").css('height',alturas[count]);



                    } else {
                        // trying to update the counter when reach the last <li> element within the <ul>
                        count = 0;
                        $(".jcarousel").css('height',alturas[count]);
                    }


                });

            });
        </script>

Answer 3

虽然这是一个老问题，但也许有人会发现它很有用。

我已经设法在 jcarousel 的初始化中仅用另外两行来解决这个问题：

var carousel = $('.carousel');

carousel.on('jcarousel:reload jcarousel:create', function() {
    /* set carousel's height basing on the first item */
    $(carousel._element).height(carousel.jcarousel('items').eq(0).height());
}).on('jcarousel:targetin', 'li', function(event, carousel) {
    /* reset carousel's height and set a new value basing on the active element's height */
    $(carousel._element).height('auto').height($(this).height());
}).jcarousel({
    wrap: 'circular'
});