我真的是 jquery 的新手，我真的没有时间看看它是如何工作的（我经常使用 PHP）我想制作一个 jquery 幻灯片，但我不知道如何在此处的图像中添加 z-index： http://www.albavid.com/new/index.html
我可以看到 jquery 添加了一些 css 元素，例如不透明度、宽度.. 等。 我尝试为当前图像添加更大的 z-index，并为右侧图像和左侧图像添加较低的 z-index。
谁能告诉我如何使用 jquery 添加 css，以便当前图像（最大）位于顶部，然后其他图像位于其后面。
【问题讨论】：
标签： javascript jquery css
将页面上的 javascript 替换为：
我在currentCss、beforeCss 和afterCss 中添加了$(el).css('z-index', 5) 和$(el).css('z-index', 0)。
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);
}
}
});
});
【讨论】：
如果您已经熟悉 CSS 覆盖，您也可以通过使用不同的类来使其工作，使用 addclass() - removeClass() 切换效果效果很好
【讨论】：
尝试将元素的position属性设置为relative，否则它们将被视为static并忽略z-index的所有设置。
【讨论】：
看起来有问题的z-index 应该应用于<li>，而不是<img>。
【讨论】：
您可以使用 .css() 函数更改元素的 z-index。
$("#elem").css('z-index','1000');
但是，两个更好的选择是为要设置样式的元素定义 CSS 类并在它们之间切换，或者使用一些不错的 jQuery 幻灯片插件。
【讨论】：
您可以通过选择元素并使用css 方法来更改内联CSS
假设一个元素没有z-index，或者是不同的，你想把它改成5
$("#elementId").css('z-index', 5);
另一种选择是预先设置具有某些 CSS 样式的类并更改某些元素的类，即（currentShown、nextUp 等）
【讨论】：
与其浪费时间重新发明轮子，为什么不直接使用jquery slideshow plugin？
【讨论】：
Z-index'ing <li> 而不是 <img> 是修复重叠的正确解决方案。但是，由于<li>s 是动态的并且前后翻转，所以从左到右按顺序对所有应用z-index 并不能解决他的问题。
解决这个问题需要在 jquery 中调用更多的操作，但不需要太多额外的工作。需要做的是让 jQuery 将z-index 应用于当前的<li>，该值高于滑块上每个事件的其余批次。
由于我无权访问您的代码，您基本上希望应用以下逻辑：
无论<li>在前面，它都应该有一个z-index:1，而所有其他<li>s应该有z-index:0。这应该发生在滑块的每次更改上。
@mcgrailm：让他休息一下，除非你跳进游泳池，否则你学不会游泳。
【讨论】：