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/

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

1 个答案: