jQuery Cycle插件pagerAnchorBuilder图片变得未定义 [英] jQuery Cycle plugin pagerAnchorBuilder images becoming undefined

问题描述

我在Flash中创建了一个幻灯片，我想在jQuery中进行模仿。幻灯片放映使用幻灯片中的图像作为寻呼机号码。我曾经遇到的问题是我曾经将链接应用到幻灯片图片中，pagerAnchorBuilder图片为图片的src返回一个未定义的图片。

Javascript -

  $（function（）{
 $（'＃slideshow'）。before（'< ul id =nav>'） .cycle（{
 fx：'fade'，
 timeout：7000，
 pager：'#nav'，
 pagerAnchorBuilder：function（idx，slide）{
 < / a>< a href =＃>< img src ='+ slide.src +'width =100height =60/>< / a>< / li>'; 
} 
}）; 
}）; 
  

HTML -

 < div id =slideshowclass =pics> 
< a href =http://google.com>< img src =home_1.jpgwidth =1000height =600/>< / a> 
< a href =http://google.com>< img src =home_2.jpgwidth =1000height =600/>< / a> 
< a href =http://google.com>< img src =home_3.jpgwidth =1000height =600/>< / a> 
< a href =http://google.com>< img src =home_4.jpgwidth =1000height =600/>< / a> 
< a href =http://google.com>< img src =home_5.jpgwidth =1000height =600/>< / a> 
 
< / div> 
  

如果我从幻灯片中删除了href，则寻呼机中的图像显示没有问题。我不知道这是一个错误还是我需要找到一个修复程序？

这是答案 -

（$< ul id =nav>'）。cycle（{$（$ {pre
fx：'fade'，
timeout：7000，
pager：'#nav'，
pagerAnchorBuilder：function（idx，slide）{
var img = $（ （0）.attr（src）;
return'< li>< a href =＃>< img src ='+ img +' width =100height =60/>< / a>< / li>';
}

}）;


$ b

}）;

解决方案

阅读这可能会帮助你！

jQuery Cycle pagerAnchorBuilder

I have a slideshow built in flash that I want to mimic in jQuery. The slide show uses the images from the slideshow as the pager numbers. The problem im having is once i apply links to the slideshow images the pagerAnchorBuilder image returns an undefined for the src of the image.

Javascript -

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' + slide.src + '" width="100" height="60" /></a></li>';
    }
});  
});

HTML -

<div id="slideshow" class="pics"> 
    <a href="http://google.com"><img src="home_1.jpg" width="1000" height="600" /></a>
    <a href="http://google.com"><img src="home_2.jpg" width="1000" height="600" /></a>
    <a href="http://google.com"><img src="home_3.jpg" width="1000" height="600" /></a> 
    <a href="http://google.com"><img src="home_4.jpg" width="1000" height="600" /></a> 
    <a href="http://google.com"><img src="home_5.jpg" width="1000" height="600" /></a> 

</div> 

If i remove the href's from the slideshow the images in the pager show up without issues. Im not sure if this is a bug or something i need to find a fix for?

Here is the answer -

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="100" height="60" /></a></li>';
    }

});

});

解决方案

Read this may help you!

jQuery Cycle pagerAnchorBuilder

这篇关于jQuery Cycle插件pagerAnchorBuilder图片变得未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！