0

Web サイト全体で 4 つの異なるサイクルを制御するために jquery Cycle の単一の入力を試みています。それらはすべて異なる 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 のみが表示されます

みんなありがとう

4

3 に答える 3

0 
$('#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',
});
于 2013-10-25T11:09:40.300 に答える
0

.each() 関数を使用して、ページャー コントロールを各サイクルに動的に追加してみませんか。

$.each( $('#homeslide, #hairslide, #panamaslide, #chawtonsslide'), function(i, e){
    $(e).before('<div id="nav' + i + '">').cycle({
        // other options here
        pager:  '#nav' + i
    });
});
于 2013-02-04T14:24:16.973 に答える
0

クラスに基づいて各 like を呼び出すよりも、各スライドショーに「slideshow」クラスを追加して、ID を保持できるようにしてください。

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

于 2013-02-04T14:26:08.243 に答える