我在页面(图像)上设置了一个循环插件，并使用寻呼机来控制水平滑动。我的问题是，有一个透明的覆盖层需要位于图像的一部分上，以显示与每个图像相关的某些文本，但更希望它具有不同的过渡效果，这样它就不会从左侧滑入。我是否能够设置幻灯片，每个幻灯片包含 3 个相关内容，我可以正确定位并使用一个寻呼机控制它们？
我的脚本目前如下所示:
$(function() {
$('.s4').before('<div id="nav" class="nav">').cycle({
fx: 'scrollHorz',
speed: 'slow',
speedIn: 'slow', // speed of the 'in' transition
speedOut: 'slow',
timeout: 6000,
pager: '#nav'
});
});
我希望这是有道理的，
谢谢
最佳答案
@Awestruck - 您可以使用元数据插件:http://jquery.malsup.com/cycle/meta2.html
通过在类属性中包含选项来指定每个幻灯片容器的选项，如下所示:<div class="slideshow { fx: 'scrollLeft', delay: -2000 }">我已经包含了来自循环插件网站的一个破解示例。此示例的唯一文件依赖项是 jquery.metadata.js。
<!doctype html>
<html>
<head>
<title>JQuery Cycle Plugin - One Pager, Two Slideshows - Different Options for each class</title>
<style type="text/css">
body { padding: 30px }
.slideshow { height: 232px; width: 232px; margin: 30px; float: left }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
#nav { text-align: center }
#nav a { padding: 5px; margin: 5px; background: #eee; border: 1px solid #ccc; text-decoration: none }
#nav a.activeSlide { background: #ddd; color: #800 }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').each(function(index) {
$(this).cycle({
pager: '#nav',
pagerAnchorBuilder: function(i) {
if (index == 0)
// for first slideshow, return a new anchro
return '<a href="#">'+(i+1)+'</a>';
// for 2nd slideshow, select the anchor created previously
return '#nav a:eq('+i+')';
}
});
});
});
</script>
</head>
<body>
<div id="nav"></div>
<div class="slideshow { fx: 'scrollLeft', delay: -2000 }">
<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" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>
<div class="slideshow { fx: 'turnDown' }">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
<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>
</body>
</html>
关于jQuery 循环插件 : One pager to control multiple slideshow on a page，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3003226/