关于循环插件的问题

http://jquery.malsup.com/cycle/pager7.html显示了一种使用图像缩略图作为寻呼机的方式。关于循环插件的问题

我想为每张图片添加一些文字描述，并仍然使用缩略图作为传呼。所以我需要添加一个DIV来包装图像，并在DIV中放置一个P。你能告诉我如何获得图像SRC？

总之，

<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /><

变为：

<div><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /><p>image description</p></div>

感谢，

返回代码，原来这里是HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<title>JQuery Cycle Plugin - 'updateActivePagerLink' Demo</title> 
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" /> 
<style type="text/css"> 
#slideshow { margin: 20px } 
#nav { width: 300px; margin: 15px; float: left } 
#nav li { width: 52px; float: left; margin: 2px; list-style: none; padding: 6px; display: block } 
#nav a { width: 50px; padding: 0px; display: block; border: 1px solid #ccc; } 
#nav li.activeLI { background: #ff8 } 
#nav a:focus { outline: none; } 
#nav img { border: none; display: block } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script> 
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script> 
<script type="text/javascript"> 
// redefine Cycle's updateActivePagerLink function 
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager).find('li').removeClass('activeLI') 
     .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
}; 

$(function() { 
    $('#slideshow').cycle({ 
     timeout: 1000, 
     pager: '#nav', 
     pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
     } 
    }); 
}); 
</script> 
</head> 
<body> 


<div id="demos"> 
    <table cellspacing="20"> 
    <tr><td><ul id="nav"></ul></td> 
    <td> 
     <div id="slideshow" class="pics"> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
     </div> 
    </td></tr> 
    </table> 

</div> 

</body> 
</html>

这里是标记我想要：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<title>JQuery Cycle Plugin - 'updateActivePagerLink' Demo</title> 
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" /> 
<style type="text/css"> 
#slideshow { margin: 20px } 
#nav { width: 300px; margin: 15px; float: left } 
#nav li { width: 52px; float: left; margin: 2px; list-style: none; padding: 6px; display: block } 
#nav a { width: 50px; padding: 0px; display: block; border: 1px solid #ccc; } 
#nav li.activeLI { background: #ff8 } 
#nav a:focus { outline: none; } 
#nav img { border: none; display: block } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script> 
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script> 
<script type="text/javascript"> 
// redefine Cycle's updateActivePagerLink function 
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager).find('li').removeClass('activeLI') 
     .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
}; 

$(function() { 
    $('#slideshow').cycle({ 
     timeout: 1000, 
     pager: '#nav', 
     pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
     } 
    }); 
}); 
</script> 
</head> 
<body> 


<div id="demos"> 
    <table cellspacing="20"> 
    <tr><td><ul id="nav"></ul></td> 
    <td> 
     <div id="slideshow" class="pics"> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
     </div> 
    </td></tr> 
    </table> 

</div> 

</body> 
</html>

来源

2011-03-11 Minghui Yu

搜索关键字 “pagerAnchorBuilder” 和现在正在读http://stackoverflow.com/questions/1370127/jquery-cycle-pageranchorbuilder – 2011-03-11 06:12:54

FYI：我得到了答案。这里是链接：http://old.nabble.com/jQuery-Cycle-pagerAnchorBuilder-with-Div-Tags-td20023944s27240.html – 2011-03-11 06:38:21

关于循环插件的问题

回答

相关问题