JQueryCycle插件-主图像下方带有缩略图的寻呼机

JQuery Cycle plugin- pager with thumbnails below the main images

本文关键字：略图 寻呼机 方带 插件 图像 JQueryCycle      更新时间：2023-09-26

我正在开发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>');

有人能给我建议解决办法吗。

Rakesh

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>';
}
        });
相关文章：