Question

我正在尝试单一输入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>

enter image description here

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

谢谢你们

Answer 1

为什么不使用.each（）函数为每个循环动态添加寻呼机控件。

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

Answer 2

如何为每个幻灯片添加“幻灯片”类，而不是根据类调用每个幻灯片，所以你可以保留你的身份

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

Answer 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',
});

jQuery Cycle插件寻呼机错误

3 个答案: