Question

好吧，伙计们，我回到了另一个复杂的问题。我有一个由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使用寻呼机创建了一个“双”幻灯片，但我似乎无法使它与可视寻呼机一起工作。

Answer 1

您必须构建自己的寻呼机。这大致是我的做法：

$('#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 /其他）。

多个malsup循环幻灯片由1个寻呼机控制，startSlide保持同步

1 个答案: