0

わかりました、私は別の複雑な質問に戻ってきました。3 つの個別の Malsup Cycle スライドショーで構成された大きなスライドショーがあります。現在のスライドは前にあり、他の 2 つはその後ろにあります。左のスライドは現在のスライドの開始スライド -1 で、右のスライドは開始スライド +1 です。これは機能します。#next をクリックすると、3 つすべてがトリガーされます。これはすばらしいことです。問題は、ページャーを実装する必要があり、ページャーは中央のスライドショーのみを制御し、他の2つは制御しないことです.

3つすべてのスライドショーをトリガーできるようにするには、ページャーが必要です.3つすべてが最初のstartingSlide関係に専念しています。

JSコードは次のとおりです。

function featuresSlideshow(){

$('ul#main-features-leftbehind').cycle({
startingSlide: 0,
fx: 'scrollLeft',
timeout: 0,
speed:   1000,
easing: 'easeInOutQuart',
pager:  '#main-features-nav',
next: 'ul#main-features-upfront'

});
$('ul#main-features-rightbehind').cycle({
startingSlide: 2,
timeout: 0, 
fx: 'scrollLeft',
speed:   1000,
pager:  '#main-features-nav',
easing: 'easeInOutQuart',
next: 'ul#main-features-upfront'
});
$('ul#main-features-upfront').before('<ul id="main-features-nav"></ul>').cycle({
startingSlide: 1,
timeout: 0, 
fx: 'blindX',
rev: 0,
speed:   1000,
easing: 'easeInOutQuart',
next: 'ul#main-features-upfront',
pager:  '#main-features-nav',
//after: afterUpfrontEvent, 
pagerAnchorBuilder: 
function(idx, slide) { 
    var src = $('img',slide).attr('src'); 
    return '<li><a href="#"><img src="' + src + '" width="50" height="50" /></a></li>'; 
    } 
});
}

HTML は次のとおりです。

<ul id="main-features-leftbehind">
    <li><div style="background:url('../images/features_MainSlideShow_slide-0.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-1.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-2.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-3.jpg') no-repeat" class="bg"></div></li>
</ul>

<ul id="main-features-rightbehind">
    <li><div style="background:url('../images/features_MainSlideShow_slide-0.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-1.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-2.jpg') no-repeat" class="bg"></div></li>
    <li><div style="background:url('../images/features_MainSlideShow_slide-3.jpg') no-repeat" class="bg"></div></li>
</ul>

<ul id="main-features-upfront">
    <li>
    <img src="../images/features_MainSlideShow_slide-0.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>
    <li>
    <img src="../images/features_MainSlideShow_slide-1.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>

<li>
    <img src="../images/features_MainSlideShow_slide-2.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>
                            <li>
    <img src="../images/features_MainSlideShow_slide-3.jpg" />
    <ul class="main-features-band">
    <li class="main-features-band-content">
    <h3>Feature Title</h3>
    <p>Short statement about function.</p>
    </li>
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li>
</ul>   
</li>
</ul>

どうもありがとう、私は複数のスライドショーを実行する方法について多くのことを読んだ.

4

1 に答える 1

0

独自のページャーを作成する必要があります。これが大まかな方法​​です。

$('#slides').cycle();
$('#titles').cycle();

$('a.nav-button').click(function(e) { 
  var slide = $('a.nav-button').index(this);
  $('#slides').cycle(slide);
  $('#titles').cycle(slide);
  e.preventDefault();
});

次に、ナビゲーション ボタンを手動で (または PHP/Ruby/その他を使用して) 出力します。

于 2011-05-27T18:31:53.783 に答える