我使用在新闻旋转器使用周期插件。 这意味着我使用div的填充幻灯片,而不是图像。
我的最终目标是使寻呼机其中而不是通常的1,2,3,4,等 - 它而是返回在滑动第一H3标签。
我知道这可能是次要的选择问题,但这里是我使用的是什么至今:
$('#scroll_wrap').cycle({
fx: 'fade',
pager: '#pager',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#">' + slide.children("h3").textContent + '</a></li>';
}
我也尝试过这样的事情:
$('#scroll_wrap').cycle({
fx: 'fade',
pager: '#pager',
pagerAnchorBuilder: function(idx, slide) {
var h3 = $('div',slide).children('h3');
return '<li><a href="#">' + slide.h3 + '</a></li>';
}
正如你可能会说,我还是一个初出茅庐的。 :/
谁能帮我出的seleciton?
更改一行在pagerAnchorBuilder功能如下:
return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';
需要三样东西被改变:
滑动=> jQuery的(滑动)
因为jQuery不其辅助功能扩展元素,除非你告诉它。 这是不jQuery的延伸当地人的原型(像元)的不幸的副作用。 这意味着你必须包装在使用jQuery(x)的代码中的每个第三件事。
儿童( “H3”)=>子( “H3”)。当量(0)
因为选择返回对象的数组匹配,你应该怎么做选择,否则在链下面的方法调用将作用于元素集合后抢到的第一个。 jQuery的应该提供的东西像.firstChild( “H3”)。
的textContent =>的.text()
的textContent是一个Mozilla的事情,在某些浏览器无法正常工作。 这里使用jQuery的的.text()方法。 在这种情况下,jQuery的没有做错任何事情。
我已经试过这一点,并努力:
$(function() {
$('#featured .container').before('<ul id="nav">').cycle({
fx: 'scrollLeft',
speed: 300,
timeout: 5000,
next: '.next',
prev: '.previous',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
var img = $(slide).children('.thumb').children().eq(0).attr("src");
return '<li><a href="#"><img src="' + img + '" width="50" height="50" /></a></li>';
}
});
Sougata
这是搜索到任何DOM元素的解决方案:
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"> img src="' + jQuery(slide).find('img').attr('src') + '" width="70" height="50" / </a></li>';
}
我张贴这一点,因为这个问题来了作为一个高排名。 我想,我的解决办法是更强大。
我把从整体pageanchorbuilder的事情了,它的方式做任何幻想繁琐。 这是我发现的工作更好,让您的拇指更多的控制。
首先打造出你的周期阶段和拇指盘是这样的:
<div class="gallery">
<div class="stage">
<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" />
</div>
<div class="thumb-tray">
<div class="thumb">Anything in here</div>
<div class="thumb">Anything in here</div>
<div class="thumb">Anything in here</div>
</div>
</div>
然后使用这个JS的缩略图链接到幻灯片。 基本上,拇指1链路滑动1等。
// Start Cycle
jQuery('.stage').cycle({
timeout: 0,
});
// Make the thumbs change the stage on click
jQuery('.gallery .thumb').click(function(){
var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});
这将有多个循环画廊的工作在页面上了。 请记住幻灯片不必是图像。 他们可能上演这样可以了:
<div class="stage">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>