JQuery Cycle插件 - 寻呼机,主图像下方有缩略图

时间:2013-02-20 20:39:27

标签: javascript jquery html css jquery-cycle

我正在使用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>');

任何人都可以向我推荐解决方案。

勒凯什

1 个答案:

答案 0 :(得分:0)

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