Question

我正在使用以下jquery插件新闻旋转器来显示几个不同的新闻标题： http://landofcoder.com/index.php?option=com_jdownloads&Itemid=372&task=view.download&cid=9

相当不错的头条新闻，但是当你跳转到不同的图层/故事时它似乎没有修改z-index，因此即使我点击新闻故事或其他视频，第1层上嵌入的视频也会激活层。因此，例如，如果我移动到另一个故事并单击播放按钮，则第一个（最顶层）故事的视频将激活与我正在播放的故事。

我希望有一个如何修改脚本的示例，以便在更改图层/故事更改时更改z-index。

我猜测可以在fxStart文件中的不透明度移位下面的script.js函数中进行修改，但我还是不能在js上使用snuff。

Answer 1

这个脚本似乎没有一个网站来演示或暴露api（似乎没有任何api）所以这是一个黑暗的镜头...你应该能够改变第277行这两行：

$(currentObj).css({zIndex:2});
$(this.slides).eq(index).css({zIndex:3}).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );

这里的想法是，在动画开始之前，您只需设置正确的视频zIndex。

同样这是一个黑暗中的镜头因为我假设'currentObj'是当前显示的对象而'$（this.slides）.eq（index）'是下面的下一个对象。

Answer 2

好的，我在后面的白色屏幕周围的方式是仅为当前图层设置动画。所以当你想淡入下一层时，你： 1.将当前图层的z-index设置为较大的数字（比如3） 2.将下一层的z-index设置为较小的数字（例如2），并将不透明度设置为1 3.淡出当前图层，这将显示下面的下一层。 4.在当前图层动画上设置回调函数，将z-index重置为正确的值，以免弄乱下一次转换。

如此适应我的上一个建议，我建议：

// accomodate your other issue
var $nextObj = $(this.slides).eq(index).css({zIndex:900, opacity:1});
$(currentObj).css({zIndex:1000}).stop().animate( {opacity:0}, {duration: this.settings.duration, easing:this.settings.easing}, function(){ $(this).css({zIndex: 1}); $nextObj.css({zIndex: 2}); );

这有意义吗？

层更改的Z-index修改（jquery插件修改）？

2 个答案: