jquery cycle：pagerAnchorBuilder

Question

我使用的是pagerAnchorBuilder，我只想鏈接到幻燈片中的特定圖像。所以頁面鏈接1，然後鏈接到幻燈片3，但我不能得到這個工作。這是我的代碼，有人爲我設置。

Page Example

<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的事情，它的方式基本做任何幻想。這是我發現的更好。

首先打造出你的週期階段和拇指盤這樣的：

<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); 
});