Question

我在同一页面上使用两个jcarousels并且只有一个工作。对于在页面的页脚上放置（在第一个之后）的第二个，prev-next按钮只执行默认操作并导航到主页。（即使我使用了jquery的prevent default方法，按钮什么都不做）当我试图在页面的侧边栏上创建第三个时，我发现了这个，并且通过给第一个提供相同的div ID（因为它使用相同的代码），后者将导航新的我试图插入。有没有办法区分旋转木马，以便两者正常运作？

抱歉对我的问题有误导性的解释。对于前两个旋转木马你是正确的，你应该没有sam eids.the第三个我试图添加，我写了不同的元素的html和js代码和我添加的一个不起作用。我提供上面的代码。

    <xsl:if test="count(//image) &gt; 1">
        <script type="text/javascript">
            <xsl:text disable-output-escaping="yes"><![CDATA[
      function drawCarousel(index,position) {
        $('#rightCarousel').stop(true, false);
        $('#rightCarousel').animate({left: -130*(index-1)}, 500);
        $('#rightCarousel').get(0).carouselIndex = index;
      }

      jQuery(document).ready(function() {
      var carouselIndex = 1;
      $('#rightCarousel').get(0).carouselIndex = carouselIndex;

      jQuery('#rightCarousel-next').bind('click', function() {
      var carouselIndex = $('#rightCarousel').get(0).carouselIndex;
      if (carouselIndex < ]]></xsl:text>
            <xsl:value-of select="count(//image) - 1"/>
            <xsl:text disable-output-escaping="yes"><![CDATA[) {
                      carouselIndex = carouselIndex + 1;
                          drawCarousel(carouselIndex,1);
                      }
                      return false;
                  });

              jQuery('#rightCarousel-prev').bind('click', function() {
                  var carouselIndex = $('#rightCarousel').get(0).carouselIndex;
                  if (carouselIndex > 1) {
                  carouselIndex = carouselIndex - 1;
                      drawCarousel(carouselIndex,-1);
                    }
                  return false;
              });

              });
    ]]></xsl:text>
        </script>
    </xsl:if>

    <div class="event_photos">
        <div class="article">
            <p class="date">
                <xsl:value-of select="ms:format-date(//@date, 'dd MMM, yyyy', $Locale)"/>
            </p>
            <p class="legend">
                <a href="{//@url}">
                    <xsl:value-of select="//summary"/>
                </a>
            </p>
            <a href="{Urls:MakeFriendly(concat('/default.aspx?pid=29&amp;la=',$LanguageID))}">
                <h2>
                    <xsl:value-of select="Resource:GetConstant('events')"/>
                </h2>
            </a>

            <xsl:if test="count(//image) &gt; 0">
                <div class="gallery-right">

                    <div class="gal_cont" style="height: 190px;width:160px;overflow: hidden; position: relative;">
                        <ul id="rightCarousel" style="{concat('height:190px;width: ',200*count(//image),'px; position: absolute;')}">
                            <xsl:apply-templates select="//image" />
                        </ul>
                    </div>

                    <xsl:if test="count(//image) &gt; 1">
                        <div class="arrow-left">
                            <a id="rightCarousel-prev" title="{Resource:GetConstant('events_previusPhotos')}" href="#">προηγούμενη</a>
                        </div>
                    </xsl:if>

                    <xsl:if test="count(//image) &gt; 1">
                        <div class="arrow-right">
                            <a id="rightCarousel-next" title="{Resource:GetConstant('events_nextPhotos')}" href="#">επόμενη</a>
                        </div>
                    </xsl:if>

                </div>
            </xsl:if>
        </div>
    </div>
</xsl:template>

<xsl:template match="//image">
    <xsl:if test="string-length(//image/@file) &gt; 0">
        <li class="img" style="display:inline;overflow: hidden;width:135px;margin:8px">
            <img src="{Image:Fit(//image/@file,130,178)}" alt="{@title}" style="max-width:130px"/>
        </li>
    </xsl:if>
</xsl:template>

Answer 1

他们需要不同的ID - ID被设计为唯一标识符，因此每页只能有一个ID。

仔细查看示例页面上的代码：http://sorgalla.com/projects/jcarousel/examples/static_multiple.html

您将看到每个轮播都有唯一的标识符（第一轮播放，第二轮播等）。

编辑;刚看到你关于旋转木马的编辑是自定义的，所以也许sorgalla项目没有直接帮助。在任何情况下，ID仍应是唯一的。

Answer 2

我使用jcarousel插件here在同一页面上实现了多个轮播元素。最初我在同一页面上有3个没有任何问题。对于页面上的多个元素，您不能拥有相同的id

Answer 3

非常感谢你的帮助。问题在于，在旋转木马的这个实现中，不仅元素必须具有不同的id，而且每个不同的carousel的javascript变量和函数。此后它可以正常工作。

Answer 4

如果旋转木马位于隐藏区域中，它似乎也没有初始化 - display: none;。

多个jCarousels同一页面问题

4 个答案: