0

我正在使用这个网站上的 Carousel 示例。
对于页面上的单个轮播效果很好，但是当我在同一页面上有多个轮播时，它仅显示顶部轮播的导航按钮，当顶部的轮播移动时，其他所有轮播都会移动。
我试图让他们每个人独立移动...... 

              <script src="/Scripts/jMyCarousel.js" type="text/javascript"></script>
              ...

             foreach(something)
             {
              <div class="jMyCarousel">
                 <ul>
                    <li>image1</li>
                    <li>image1</li>
                    ...
                 </ul>
              </div>
             }
              ...

             <script type="text/javascript">
                $(function() {
                $(".jMyCarousel").jMyCarousel({ visible: '50%', eltByElt: true });
                });
             </script>

据我所知，如果在脚本（最后一部分）中我正在使用类（例如“.jMyCarousel”），它应该为每个具有此类名称的项目创建一个新的轮播。但这里不是t 的情况。

知道如何使每个轮播独立吗？

4

2 回答 2

0

不要“按原样”使用选择器。这不是真正的迭代。使用迭代器并为每个循环应用行为。例子：

$(".jMyCarousel").each(function(){ 
    $(this).jMyCarousel({ visible: '50%', eltByElt: true });
});

我发布了我的评论作为答案，因此您可以关闭问题:)

于 2012-06-22T23:02:21.820 回答
0

为您找到此链接

图片轮播 1.0.3 已发布

他们在这里有多个实例的演示

演示页面

检查演示页面的代码：

    $(function() {
        $(".JMyCarousel#carousel1").jMyCarousel({
            visible: '100%'
        });
        $(".JMyCarousel#carousel2").jMyCarousel({
            visible: '4',
            eltByElt: true,
            evtStart: 'mousedown',
            evtStop: 'mouseup'
        });
        $(".JMyCarousel#carousel3").jMyCarousel({
            visible: '3',
            auto : false, 
            vertical : true,
            speed : 500
        });
    });

我知道你不知道会有多少个 div，所以这对你来说是个问题。你不能动态创建ID吗？

于 2012-06-19T03:52:00.653 回答