Question

我正在使用pagerAnchorBuilder，我想简单地链接到幻灯片中的特定图像。因此，寻呼机链接1将链接到幻灯片3，但我无法使其正常工作。这是我为我设置的代码。

<script type="text/javascript">
$(document).ready(function(){
var start;
if(window.location.hash){
    start = window.location.hash.substr(1);
} else {
    start = 0;
}
$('#slideDesign').cycle({
startingSlide: start,
fx: 'fade',
speed: 'fast',
timeout: 0,
next:   '.nextBT', 
prev:   '.prevBT', 
pager: '.navDesign',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '.navDesign li:eq(' + (idx) + ') a';
} 
});

});
</script>

Answer 1

我刚刚跳过了整个pageanchorbuilder的事情，它是基本的做任何想象力的方式。这是我发现更好的工作。

首先按照以下步骤构建您的Cycle阶段和拇指托盘：

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

然后使用此JS将缩略图链接到幻灯片。基本上，拇指1链接到幻灯片1，依此类推。

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

这也适用于页面上的多个Cycle画廊。

现在，如果要将拇指1链接到幻灯片3，请将最后一次单击功能更改为每个thumbIndex的+2。因此拇指1链接到幻灯片3，拇指2链接到幻灯片4（在这种情况下不存在）。

// Make the thumbs change the stage, but add 2 to the thumbIndex
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
        thumbIndex = thumbIndex+2;
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

如果它只是你想要添加2的第一个拇指，那么你可以做一个if语句（保持ind，这是所有基于0的索引），如下所示：

// Make the thumbs change the stage
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    if(thumbIndex == 0) {
        thumbIndex = thumbIndex+2;
    }
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

jquery循环：pagerAnchorBuilder

1 个答案: