JQuery循環插件 - 與主圖像下方的縮略圖的分頁器

Question

我正在jQueryCycle插件上獲取帶有主圖像下面的縮略圖的尋呼機。這是我工作的教程。下面 http://digitalunion.osu.edu/2011/10/18/jquery-cycle-plugin-a-little-tutorial/

是我的jQuery代碼我工作的

$(document).ready(init); 

function init() { 
// dynamically add a div to hold the slideshow's pager 
$(".bison_images").before('<div class="pager"></div>'); 

// now to use the cycle plugin 
$(".bison_images").cycle({ 
    pause: 1, 
    pager: ".pager", 
    pagerAnchorBuilder: imagePager 
}); 
} 

    function imagePager(index, slide) { 
var slide = jQuery(slide); 
var img = slide.children("img").get(0); 
return '<a href="#"><img src="' + img.src + '" width="110" height="66" /></a>'; 
} 

在這裏，我得到相同的輸出例所示鏈接，上面粘貼。但是我希望主圖像下方的尋呼機。我嘗試了下面的命令，但沒有成功。

$(".bison_images").after('<div class="pager"></div>'); 

任何人都可以向我推薦解決方案。

拉克什

Answer 1

enter code here 

檢查這個工程...

$('.bison_images').after('<div class="pager">').cycle({ 
      fx:  'scrollHorz', 
      speed: 'slow', 
      timeout: 9000, 
      pager: '.pager', 
      pagerAnchorBuilder: function(idx, slide) { 
    var slide = jQuery(slide); 
    var img = slide.children("img").get(0); 
    return '<a href="#"><img src="' + img.src + '" width="110" height="66" /></a>'; 
} 
     });