jQuery Cycle插件帮助

Question

我正在尝试建立一个滑动旋转器与jQuery周期插件，但我有一些问题的自定义显示，我need...Basically我有幻灯片，并在每个幻灯片上有一个文本框与文本。我只想让幻灯片滑动，但我想让文本淡出，然后在新幻灯片出现时加入。

这是我的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已经被隐藏了，所以在之前没有任何效果，因为它是在后面显示的。

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

另一种选择是让div覆盖文本以隐藏它，然后在后面隐藏下面的文本，并删除div并淡入。

第三种选择是仅选择循环函数中的图像。jQuery(“#home-.cycle img”)滑块，或者如果这不起作用，那么将它们放在单独的div中循环。