Javascript 如何在滑块中为图像添加上边距
大家好,我有下面的div格式的图像滑块Javascript 如何在滑块中为图像添加上边距,javascript,jquery,html,image,slider,Javascript,Jquery,Html,Image,Slider,大家好,我有下面的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:
<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>
JQuery脚本是这样的
$(窗口)。加载(函数(){
var h=$('.rslides').find('img').outerHeight(true);
如果(h第一件事:您的标记有错误,UL结束标记的格式不正确
您需要迭代每个拇指,然后分别计算出高度和差值,如下所示:
.callbacks_container {
float: left;
position: relative;
width: 100%;
}
.rslides {
list-style: none outside none;
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
$(窗口).load(函数(){
var images=$('.rslides').find('img');
each(function(){//jQuery each在jQuery对象上循环
var h=$(this).outerHeight(true);//$(this)是当前图像
如果(hPlease include a),它在JSFIDLE中运行良好,但当我应用滑块时,所有图像的边距都会出现,即使if()声明是错误的。我不熟悉JQuery和脚本,所以很难解决这个问题。如果滑块的第一个图像大于290px,它可以正常工作,没有边距顶部,但如果其他图像大于290,它也会为它们生成边距。我不确定如果小提琴工作,我该怎么建议,但您的代码不工作?
<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>
$(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"
});
});