Jquery循环推进寻呼机 - 如何调用不同的缩略图图像源？

Question

我正在使用以下标记来设置我的jquery循环幻灯片。但是，我想弄清楚如何使用不同的图像src实现缩略图。如果我的放大图像src是image-file-name.jpg，我如何使用src th-image-file-name.jpg调用缩略图？

    <script type="text/javascript">
$(document).ready(function() {
$('#s2').cycle({ 
fx:     'fade', 
speed:  'slow', 
timeout: 0, 
next:   '#next', 
prev:   '#prev', 
pager:  '#thumbs',
after: onAfter,

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="140" height="140" /></a></li>'; }

 });


 function onAfter(curr, next, opts, fwd) {
 var index = opts.currSlide;
 //$('#prev')[index == 0 ? 'hide' : 'show']();
 //$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
//get the height of the current slide
var $ht = $(this).height();
//set the container's height to that of the current slide
$(this).parent().animate({height: $ht});
}
});
    </script>

Answer 1

我相信本教程将帮助您实现所需目标：Tutorial

以下是演示：Demo