多个 jQuery Cycle 寻呼机导航
Posted
技术标签:
【中文标题】多个 jQuery Cycle 寻呼机导航【英文标题】:Multiple jQuery Cycle pager navigation 【发布时间】:2012-12-07 03:26:39 【问题描述】:我正在实施 jQuery 循环插件以创建 20 个图像画廊,每个画廊都有自己的上一个、下一个和寻呼机导航控件,而不必为每个幻灯片创建和引用 3 个新的 ID 名称,也不必创建一个每个幻灯片的单独功能。在下面的示例中,我尝试为每个幻灯片提供一个独特的寻呼机,但没有取得有限的成功。我希望有一种更直观的方式来使用 .each() 函数来编写它。提前感谢任何可以提供帮助的人。
html: (我在这个例子中只包含了两个幻灯片)
<div class="slideshow_container">
<div class="work_slideshow">
<div class="slideshow" id="s1">
<img class="slide" src="images/port/design_unique_1.jpg" />
<img class="slide" src="images/port/design_unique_2.jpg" />
<img class="slide" src="images/port/design_unique_3.jpg" />
</div>
<div class="controls">
<img src="images/arrow_left.png" class="prev"/>
<img src="images/arrow_right.png" class="next"/>
</div>
<div class="pager" id="pager1"></div>
</div>
<div class="work_slideshow">
<div class="slideshow" id="s2">
<img class="slide" src="images/port/design_equality_1.jpg" />
<img class="slide" src="images/port/design_equality_2.jpg" />
</div>
<div class="controls">
<img src="images/arrow_left.png" class="prev"/>
<img src="images/arrow_right.png" class="next"/>
</div>
<div class="pager" id="pager2"></div>
</div>
</div>
jQuery:
$('.slideshow').cycle(
fx: 'fade',
easing: 'easeOutExpo',
speed:2000,
prev:'.prev',
next:'.next',
timeout:0,
pagerAnchorBuilder: function(idx, el)
return '<a href="#" title="Slides"></a>';
,
);
$('#s1').cycle(
pager:'#pager1'
);
$('#s2').cycle(
pager:'#pager2'
);
【问题讨论】:
【参考方案1】:编辑:没有正确阅读问题。给你
$('.slideshow').each(function ()
var pager = $(this).closest('.work_slideshow').find('.pager');
$(this).cycle(
fx: 'fade',
easing: 'easeOutExpo',
speed:2000,
timeout:0,
pager: pager,
pagerAnchorBuilder: function(idx, el)
return '<a href="#" title="Slides"></a>';
,
);
);
这样的?
对于上一个和下一个,我认为像这样手动绑定上一个和下一个按钮会更有效。
$('.slideshow_container').on('click','.controls .prev',function (e)
e.preventDefault();
$(this).closest('.work_slideshow').find('.slideshow').cycle('prev');
);
$('.slideshow_container').on('click','.controls .next',function (e)
e.preventDefault();
$(this).closest('.work_slideshow').find('.slideshow').cycle('next');
);
基本上所有下一个/上一个按钮都有一个单击处理程序,并使用 .cycle('prev') 和 .cycle('next') 手动访问循环插件
如果您愿意,您甚至可以将其缩小为一键处理程序
$('.slideshow_container').on('click','.controls a',function (e)
e.preventDefault();
if ($(this).hasClass('next')
$(this).closest('.slideshow').cycle('next');
else
$(this).closest('.slideshow').cycle('prev');
);
【讨论】:
理论上这正是我所需要的。不幸的是,肯定有一些地方有点不对劲,因为上一个/下一个按钮都不起作用并且寻呼机不可见。此外,不会出现任何难以调试的错误。 “work_slideshow”类是否可能会干扰类层次结构? 我无法让一键式处理程序示例正常工作。根据提供的示例,前进和下一个按钮都被分配了下一个功能。以上是关于多个 jQuery Cycle 寻呼机导航的主要内容,如果未能解决你的问题,请参考以下文章