0

好的，伙计们，我又带着另一个复杂的问题回来了。我有一个由 3 个独立的 Malsup Cycle 幻灯片组成的大幻灯片。当前幻灯片在前面，另外 2 张在后面，左边一张是当前幻灯片的起始幻灯片 -1，右边一张是起始幻灯片 +1。这行得通。当我单击#next 时，它会触发所有三个，这很棒。问题是我需要实现一个寻呼机，而寻呼机只控制中央幻灯片而不是其他 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>

非常感谢你们，我已经阅读了很多关于如何执行多个幻灯片的阅读，甚至 Malsup 使用寻呼机创建了一个“双”幻灯片，但我似乎无法使其与可视寻呼机一起使用。

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/whatever）。

于 2011-05-27T18:31:53.783 回答