jQuery Cycle 插件寻呼机错误答案

【问题标题】：jQuery Cycle plugin pager errorsjQuery Cycle 插件寻呼机错误
【发布时间】：2013-02-04 13:00:51
【问题描述】：

我正在尝试输入一个 jquery Cycle 来控制整个网站的 4 个不同的循环。它们都有不同的 ID 标签，但是，寻呼机控件 div 出现了 4 次。这是我的jQuery：

$('#homeslide, #hairslide, #panamaslide, #chawtonsslide') 
.cycle({ 
fx: 'fade', 
speed: '1000', 
timeout: '8000', 
next: '#next',
prev: '#prev',
cleartypeNoBg: 'true',
pager: '#controls'
});

HTML：

<div id="banner-container">
    <div id="prev"></div>
    <div id="next"></div>
    <div id="controls"></div>
    <div id="homeslide">
        <img src="template/banner1.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
    <div id="hairslide">
        <img src="template/banner2.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
    <div id="panamaslide">
        <img src="template/banner2.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
    <div id="chawtonsslide">
        <img src="template/banner2.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
</div>

它可以工作，除了显示 4 个寻呼机 div。我打算尝试 $.each 计数，但由于他们都需要 ID，我认为我做不到。值得注意的是，这些不同的图像块是通过我们的 CMS 控制的，并且每页只显示某些图像块。示例：home.htm 仅显示#homeslide

谢谢大家

【问题讨论】：

不幸的是，这是针对工作中的客户的，我无法发布链接。我会尝试获取一些代码并发布，2 秒
尽可能多地添加
所以你只想要 1 个寻呼机控制所有这些？还是没有寻呼机控制？
一个分页器控件只显示，你可以看到有4个哈哈。
所以有4个页面，每个渲染另一个div循环？并且您希望在每一页上恰好有一个周期和一个寻呼机？

标签： jquery plugins cycle

【解决方案1】：

为什么不使用 .each() 函数为每个循环动态添加分页器控件。

$.each( $('#homeslide, #hairslide, #panamaslide, #chawtonsslide'), function(i, e){
    $(e).before('<div id="nav' + i + '">').cycle({
        // other options here
        pager:  '#nav' + i
    });
});

【讨论】：

这也只是破坏了一切。它杀死了所有的jQuery代码。知道为什么吗？

【解决方案2】：

如何为每个幻灯片添加一个“幻灯片”类而不是基于类调用每个类似，这样你就可以保留你的身份证了

http://www.malsup.com/jquery/cycle/pager-double.html

【讨论】：

试过了，它只是破坏了一切:(我认为这是因为 div 有一个 id 和 class 一起。这没有任何意义，但我需要两个大声笑
另外，有些 div 中的图片数量不同，所以每页底部的点会有所不同。我很困惑

【解决方案3】：

$('#homeslide') 
    .cycle({ 
    fx: 'scrollVert', 
    speed: '1000', 
    timeout: '8000', 
    pager: '#pager',
    pagerAnchorBuilder: function(i) {
            return '<a href="#"></a>';
    },
    next: '#next',
    prev: '#prev',
    cleartypeNoBg: 'true'
});

$('#hairslide') // can add other divs here that require to use the same pager
    .cycle({ 
    fx: 'fade', 
    speed: '1000', 
    timeout: '8000',
    next: '#next',
    prev: '#prev',
    pager: '#pager',
    pagerAnchorBuilder: function(i) {
            return $('#pager a:eq('+i+')');
    },
    cleartypeNoBg: 'true',
});

【讨论】：