jQuery Cycle 插件帮助

Question

我正在尝试使用 jQuery Cycle 插件构建一个滑动旋转器，但是在我需要的自定义显示方面遇到了一些问题...基本上我有幻灯片，并且在每张幻灯片的顶部都有一个带有文本的文本框。我只想幻灯片滑动，但我希望文本淡出，然后在新幻灯片进入时淡入。

这是我的 HTML：

<div id="home-slider">
     <div class="slide">
          <img src="image.jpg" width="200" height="200" />
          <div class="text-box">
               <p>Some text here</p>
          </div>
     </div>
     <div class="slide">
          <img src="image.jpg" width="200" height="200" />
          <div class="textblock">
               <p>Some text here</p>
          </div>
     </div>
</div>

这是 JS：

function onBefore() {
    jQuery("#home-slider .slide .textblock").hide();    
}
function onAfter() { 
    jQuery("#home-slider .slide .textblock").fadeIn('fast');
}
jQuery("#home-slider").cycle({
        speed:  500, 
        timeout: 3000,
    after:   onAfter,
    before: onBefore

});

所以幻灯片工作正常，但当我想要时文本会随之滑动他们只是淡入/淡出。

有什么想法吗？

Answer 1

对于滑动，您必须将 fx 属性设置为“scrollHorz”或 scorllVert。看看这个工作演示。另外，您的班级名称中有一些拼写错误。

演示

Answer 2

您在 jquery 调用中缺少“#”，并且在 html 的某一部分中缺少其调用的文本框：

function onBefore() {    
  jQuery("#home-slider .slide .text-box","#home-slider .slide .textblock").hide(); 
}
function onAfter(curr, next, opts) {     
  jQuery("#home-slider .slide .text-box","#home-slider .slide .textblock").fadeIn('fast');    
  jQuery("#home-slider .slide").css("zIndex","");
}

Answer 3

我相信发生的情况是幻灯片 div 已经隐藏，因此 onbefore 没有任何效果，因为它之后显示。

解决这个问题的一种方法是使用文本缩进将其从屏幕上移开，然后将其隐藏，正确地重新定位文本，然后淡入。

另一种选择是在文本上方放置一个 div 以隐藏它，然后隐藏下面的内容文本 onafter 并删除 div 并淡入。

第三个选项是仅选择循环功能中的图像。 jQuery("#home-slider img").cycle 或者如果这不起作用，则将它们放在单独的 div 中进行循环。