添加CSS到jquery帮助

我真的很新的jquery，我真的没有时间看它是如何工作的（我用PHP工作了很多）我想做一个jQuery幻灯片，但我不知道如何添加z-索引这里的图片：http://www.albavid.com/new/index.html 添加CSS到jquery帮助

我可以看到的jquery添加一些CSS元素，如不透明性，宽度..等我试图更大的z索引对当前图像和较低的z索引添加到右侧图像和左图像。

任何人都可以告诉我如何使用jquery添加css，以便当前图像（最大）位于顶部，然后位于其他位置。

来源

2011-03-28 TooCooL

这个替换您的网页上的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); 
     } 
     } 
    }); 
});

来源

2011-03-28 19:49:52

我不知道如何谢谢你！我会尝试阅读脚本，看看你做了什么。我不知道我能为你做什么因为你为我节省了很多时间 – TooCooL 2011-03-28 19:52:57

您可以通过选择元素，并使用css方法

假设一个元素改变内嵌CSS没有z-index的，还是不同的，并且希望将其更改为5

$("#elementId").css('z-index', 5);

另一个选择是设立一定的CSS样式类前手和改变类的某些元素，即（currentShown，下一部影片等）

来源

2011-03-28 19:33:59

而不是浪费你的时间重新发明轮子为什么不直接使用jquery slideshow plugin？

来源

2011-03-28 19:34:40 mcgrailm

我要为别人做，自己也有点挑剔:) – TooCooL 2011-03-28 19:57:28

只是一个想法，我有我 – mcgrailm 2011-03-28 19:59:07

它并欣赏谢谢你兄弟.. – TooCooL 2011-03-28 20:05:23

尝试将元素的position属性设置为relative，否则它们将被视为static并忽略所有设置为z-index。

来源

2011-03-28 19:36:18 Kaivosukeltaja

一个LITTEL位更详细的请， – TooCooL 2011-03-28 19:44:48

它看起来像z-index应该适用于<li>，而不是<img>。

来源

2011-03-28 19:37:16

我怎么能添加它给李？更多信息？因为我已经在索引中包含jquery文件和jquery脚本，但我不知道它是如何工作的，它看起来像它的OOP，并且该类是在index.html中启动的，但我不知道我真的离jquery很远。我将需要一些更多的细节帮助。谢谢你的时间。 – TooCooL 2011-03-28 19:40:43

你也可以通过它使用不同类型的使用addclass()工作 - removeClass()切换效果效果很好，如果你已经很熟悉CSS覆盖

来源

2011-03-28 19:37:34 clairesuzy

你能帮我详细介绍一下，因为我尝试添加z-index，但是无论我做什么脚本停止工作！我可能不在正确的轨道上。感谢您的时间！ – TooCooL 2011-03-28 19:47:26

我提高了接受的答案，因为我认为这是您最好的情况下保持与现有的脚本，您可以根据图像的宽度切换类，并添加z-index父 - 但最终这就像重新写一点点脚本 – clairesuzy 2011-03-28 21:19:53

你可以改变的了的z-index元素通过使用.css（）函数。

$("#elem").css('z-index','1000');

但是，有两个更好的选择是要么定义样式所需的元素的CSS类及它们之间进行切换，或使用一些不错的jQuery插件播放幻灯片。

来源

2011-03-28 19:39:27

Z-index'ing的<li>代替<img>是修复所述重叠的解决方案。然而，由于<li>是动态的，并且在彼此之前和之后翻转，所以从左到右依次应用z-index将不能解决他的问题。

解决这个问题需要更多的操作来在jquery中调用，但不需要额外的工作。需要发生的事情是，jQuery将当前的<li>应用于高于批处理的其余部分的滑块上每个事件的z-index。

由于我没有访问到你的代码，你基本上要应用以下逻辑：无论<li>在前面它应该有一个z-index:1和所有其他<li> S的关系有z-index:0。这应该发生在滑块的每个更改中。

@mcgrailm：给他一个休息的男人，你不能学会如何游泳，除非你跳进游泳池。

来源

2011-03-28 19:51:22 NaN

是的我知道，但对我来说，现在它错了时间在错误的地方，这就是为什么我不能跳到游泳池！无论如何..谢谢你的时间 – TooCooL 2011-03-28 19:56:13

添加CSS到jquery帮助

回答

相关问题