一个关于 Cycle 插件的问题
Posted
技术标签:
【中文标题】一个关于 Cycle 插件的问题【英文标题】：A question on Cycle plugin 【发布时间】：2011-03-11 05:45:08 【问题描述】：http://jquery.malsup.com/cycle/pager7.html 展示了一种将图像缩略图用作寻呼机的方法。
我想为每张图片添加一些文字描述，并且仍然使用缩略图作为寻呼机。所以我需要添加一个DIV来包装图像，并且还要在DIV里面放一个P。你能告诉我如何获取图像SRC吗？
总之，
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" /><
变成：
<div><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" /><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 + '" /></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" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" />
</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 + '" /></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" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" />
</div>
</td></tr>
</table>
</div>
</body>
</html>
【问题讨论】：
搜索关键字“pagerAnchorBuilder”，现在正在阅读***.com/questions/1370127/… 仅供参考：我得到了答案。这是链接：old.nabble.com/… 【参考方案1】：http://forum.jquery.com/topic/a-question-on-cycle-plugin
【讨论】：
以上是关于一个关于 Cycle 插件的问题的主要内容，如果未能解决你的问题，请参考以下文章
带有 maphilight 的 Jquery Cycle 插件停止工作