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; 
    }

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

1 个答案: