Question

我在页面（图像）上设置了一个循环插件，并带有一个寻呼机来控制水平滑动。我的问题是，有一个透明的叠加层需要坐在图像的一部分上，以获得与每个图像相关的一些文本，但更愿意为此设置不同的过渡效果，因此它不会从左侧滑入。我能够设置幻灯片，每个都有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'
});

}）;

我希望这是有道理的，

由于

Answer 1

@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 Cycle插件：一个页面控制器，用于控制页面上的多个幻灯片

1 个答案: