如何在滑块中为图像添加上边距

Question

大家好，我有下面的图像滑块的div格式

<div class="callbacks_container">
<ul id="slider1" class="rslides"> 
<li id="transparent-btns1_s0" class="fluidratio transparent-btns1_on" style="display: block; float: left; position: relative; opacity: 1; z-index: 2; transition: opacity 500ms ease-in-out 0s;">
<div id="bg">
<img class="thumb" >
</div>
</li></ul</div>

我有下面的css用于上面的

.callbacks_container {
    float: left;
    position: relative;
    width: 100%;
}
.rslides {
    list-style: none outside none;
    margin: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}

JQuery脚本就像这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script defer src="http://wstation.inmomundo.com/static01/scripts/responsiveslides.min.js"></script>
<script>
$(window).load(function() {
var h = $('.rslides ').find('img').outerHeight(true);
if( h<290)
{
  var m = 290-h;
      m = m/2;
$('.thumb').css('margin-top', +m + "px");
}
$("#slider1").responsiveSlides({
        auto: false,
        pager: true,
        nav: true,
        speed: 500,
        maxwidth: 540,
        namespace: "transparent-btns"
      });
      });
</script>

我的问题是，我添加了脚本来检查图像的高度，然后相应地添加上边距。这只适用于滑块的第一个图像，我认为当页面加载时，它会起作用，但在那之后，对于所有下一个图像，它保持不变。我应该怎么做才能对滑块中的所有图像进行类似的处理。

感谢

Answer 1

首先：您的标记有一个错误，UL结束标记格式错误。

你需要对每个拇指进行迭代，并分别计算出高度和差异，如下所示：

$(window).load(function() {
    var images = $('.rslides ').find('img');
    images.each(function(){ // jQuery each loops over a jQuery obj
        var h = $(this).outerHeight(true); // $(this) is the current image
        if( h<290)
        {
          var m = 290-h;
              m = m/2;
          $(this).css('margin-top', +m + "px");
        }
    });
    $("#slider1").responsiveSlides({
            auto: false,
            pager: true,
            nav: true,
            speed: 500,
            maxwidth: 540,
            namespace: "transparent-btns"
    });
});

这里有一个JSFiddle，注意每个图像现在在顶部都有一个边距：

http://jsfiddle.net/chrissp26/9JLxE/