根据从 foreach 循环生成的动态数或元素计算宽度

Question

我正在与prototype carousel 合作。我正在尝试使用动态生成的元素数量来做到这一点，因此内部 div 的数量会有所不同。现在脚本似乎需要固定宽度并将其编码到脚本中。

内部内容是使用这样的 foreach 循环生成的：

<div class="carousel" id="example-2">
<a href="javascript:" class="carousel-control next" rel="next">&rsaquo;</a>
<a href="javascript:" class="carousel-control prev" rel="prev">&lsaquo;</a>
    <div class="middle">
    <!-- how can this inner width be dynamically populated ? -->
        <div class="inner" style="width: 3000px">
        <?php foreach ($_productCollection as $_product): ?>
        <?php if($_product->isSaleable()): ?> 
        <img class="<?php echo $_product->getId() ?>"  src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
        <?php endif; ?>
        <?php endforeach ?>
        </div>
    </div>

    <script type="text/javascript">
     new Carousel($('example-2').down('.middle'), $('example-2').down('.inner').select('img'), $('example-2').select('a'), {
                                duration: 0.5,
                                transition: 'sinoidal',
                                visibleSlides: 6,
                                circular: true
                            });
                        </script>
                </div>   

如何从 foreach 循环中生成的 $_product div 的数量中获得总计数？假设有 10 个，然后我将它与 img 的固定宽度相乘，比如 50px，然后我可以用 500px 填充 .inner 宽度。

Answer 1

计算一个项目（包括其填充）将在显示区域中占用多少空间 [像素]。将其乘以您在任何给定时间显示的项目数量，这将为您的显示区域提供流畅的宽度。

看看这个Pagination example for the Carousel by Yahoo

请特别注意 numItems 和以下 CSS 摘录以获得流畅性：

/* Always be sure to give your carousel items a width and a height */ 
    .yui-carousel-element li { 
        height: 75px; 
        width: 75px; 
    }