我对jquery很新，我真的没时间看看它是如何工作的（我经常使用PHP）我想制作一个jquery幻灯片，但我不知道如何在这里添加z-index到图像： http://www.albavid.com/new/index.html
我可以看到jquery添加了一些css元素，如不透明度，宽度......等。 我试图为当前图像添加更大的z-index，并将z-index添加到右图像和左图像。
任何人都可以告诉我如何使用jquery添加css，以便当前图像（最大的）位于顶部，然后是其后的其他图像。
答案 0 :(得分：2)
用以下内容替换页面上的javascript：
我在$(el).css('z-index', 5)，$(el).css('z-index', 0)，currentCss和beforeCss添加了afterCss和jQuery( document ).ready( function(){
jQuery( '#flip' ).jcoverflip({
current: 2,
beforeCss: function( el, container, offset ){
$(el).css('z-index', 0);
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,200-10*offset*offset) + 'px' }, {} )
];
},
afterCss: function( el, container, offset ){
$(el).css('z-index', 0);
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '10px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,200-10*offset*offset) + 'px' }, {} )
];
},
currentCss: function( el, container ){
$(el).css('z-index', 5);
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 200 )+'px', bottom: 0 }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: '400px' }, { } )
];
},
change: function(event, ui){
jQuery('#scrollbar').slider('value', ui.to*25);
}
});
jQuery('#scrollbar').slider({
value: 50,
stop: function(event, ui) {
if(event.originalEvent) {
var newVal = Math.round(ui.value/25);
jQuery( '#flip' ).jcoverflip( 'current', newVal );
jQuery('#scrollbar').slider('value', newVal*25);
}
}
});
});
。
{{1}}
答案 1 :(得分：1)
你也可以通过使用不同的类来使用它addclass() - removeClass()来切换效果，如果你已经熟悉CSS覆盖
答案 2 :(得分：0)
您可以通过选择元素并使用css方法
假设一个元素没有z-index或不同的z-index，并且你想将它改为5
$("#elementId").css('z-index', 5);
另一种选择是先设置具有某些CSS样式的类并更改某些元素的类，即（currentShown，nextUp等）
答案 3 :(得分：0)
而不是浪费你的时间重新发明轮子为什么不只是使用jquery slideshow plugin？
答案 4 :(得分：0)
尝试将元素的position属性设置为relative，否则它们将被视为static并忽略z-index的所有设置。
答案 5 :(得分：0)
看起来有问题的z-index应该应用于<li>，而不是<img>。
答案 6 :(得分：0)
您可以使用.css（）函数更改元素的z-index。
$("#elem").css('z-index','1000');
但是，两个更好的选择是为要设置样式的元素定义CSS类并在它们之间切换，或者使用一些不错的jQuery幻灯片插件。
答案 7 :(得分：0)
对<li>而不是<img>进行Z-index是解决重叠问题的正确解决方案。但是，由于<li>是动态的并且在彼此之前和之后翻转，因此从左到右按顺序顺序应用z-index将无法解决他的问题。
解决问题需要在jquery中调用更多的操作，但不需要太多额外的工作。需要做的是让jQuery为滑块上的每个事件将z-index 应用于当前<li> 高于批次的其余部分。
由于我无法访问您的代码，您基本上想要应用以下逻辑：
无论<li>位于前面，它应该有z-index:1，而所有其他<li>应该有z-index:0。这应该发生在滑块的每次更改中。
@mcgrailm：给他一个休息的人，除非你跳进游泳池，否则你无法学会游泳。