【发布时间】:2015-10-26 21:58:04
【问题描述】:
我有 jquery 滑块。有时滑块的高度小于正常高度。 我用 Jquery 计算#slider 的高度,因为滑块是响应式的。
HTML:
<div id="slider">
<ul id="sliderres">
<li><img class="slires" src="slider/1.jpg" alt=""></li>
<li><img class="slires" src="slider/2.jpg" alt=""></li>
<li><img class="slires" src="slider/3.jpg" alt=""></li>
<li><img class="slires" src="slider/4.jpg" alt=""></li>
</ul>
</div>
CSS:
#slider{
overflow:hidden;
margin:10px auto;
width:1024px;
position:relative
}
#slider #sliderres li{
font-size:20px;
float:left;
list-style:none;
text-align:center
}
#slider #sliderres li img{
width:100%
}
查询:
var sliuzun = $('#sliderres li:first-child').height(),
time=0;
$('#slider').height(sliuzun);
$('#buton li:first').addClass('buton');
$('#buton li').click(function(){
var butind = $(this).index();
$('#slider #sliderres li:eq('+butind+')').fadeIn('fast');
$('#buton li').removeClass('buton');
$(this).addClass('buton');
return false;
});
$(window).resize(function(){
sliuzun = $('#sliderres li:first-child').height()
$('#slider').height(sliuzun);
});
$.Slider = function(t){
$('#slider #sliderres li').hide();
if(time < t - 1){
time++;
$('#slider #sliderres li:eq('+time+')').fadeIn('fast');
}else{
$('#slider #sliderres li:first').fadeIn('fast');
time = 0;
}
}
setInterval('$.Slider('+$('#slider #sliderres li').length+')',2500);
【问题讨论】:
-
less than normal height并不是什么问题描述。这意味着什么?normal是什么。请用正确的解释更新问题 -
你要达到什么目标?您是否希望“低于正常高度”的图像被拉伸以匹配其他图像?如果是这样,试试这个 CSS
#slider #sliderres li img{ width:100%; height:100%; } -
请提供一个活生生的例子,也许是您看到的问题的屏幕截图。这是一个起点:jsfiddle.net/prrstn/bpgyku1f 我无法创建它,因为我没有您的图像或它们的尺寸。