没有显示div占用空间的bootstrap轮播图片
[英]bootstrap carousel image which is display none div taking space
问题描述
我有引导轮播，并且img的轮播具有data-mobil和data-table属性，当我为平板电脑调整窗口大小时，我的img src值已与data-table src契合，或者当我为移动设备调整窗口大小时，img src已被chancing宽度data-mobil在同一thime src..it有什么？所以far..but如果data-mobil或data-tablet是未定义的我的意思是空比使之显示：无; 但是我的显示器没有占用空间的原因？
单击以查看实时示例 -平板电脑版本的调整大小窗口
function makeResize() { var imageSrc = $(".main-carousel img"); if ($(window).width() <= 768 && $(window).width() > 480) { $(imageSrc).each(function(key, value) { if ($(value).data('tablet') == undefined) $(value).parent(".item").hide(); else { $(value).attr('src', $(value).data('tablet')); $(value).parent(".item").show(); } }); } else if ($(window).width() <= 480) { $(imageSrc).each(function(key, value) { if ($(value).data('mobil') == undefined) { $(value).parent(".item").hide(); } else { $(value).attr('src', $(value).data('mobil')); $(value).parent(".item").show(); } }); } else { $(imageSrc).each(function(key, value) { $(value).attr('src', $(value).data('src')); $(value).show(); }); } } $(document).ready(function(){ $(window).resize(function(){ makeResize(); }); makeResize(); });
.main-carousel{ width:1000px; } .main-carousel img{ width:100%; }
<html lang="en"> <head> <meta charset="UTF-8" /><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div id="homepage-carousel" class="carousel carousel-fade slide main-carousel" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#homepage-carousel" data-slide-to="0" class="active"></li> <li data-target="#homepage-carousel" data-slide-to="1"></li> <li data-target="#homepage-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://cdn.anitur.com.tr/resimler/normal/2017-02/banner_Hn3kjP6eM7ltkZzATMMkanitur-enguzel-anilar-manset-banner-2017-6subat.jpg" data-mobil="http://www.anitur.com.tr/blog/wp-content/uploads/2016/06/Karadeniz24-372x221.jpg"> </div> <div class="item"> <img src="http://cdn.anitur.com.tr/resimler/normal/2016-12/banner_r7SIBGm1BaKCNMsZojfNtermal-bolgeler.jpg" data-tablet="http://www.anitur.com.tr/blog/wp-content/uploads/2016/03/Silversea-cruise-1024x657.jpg" data-mobil="http://www.anitur.com.tr/blog/wp-content/uploads/2016/06/Karadeniz24-372x221.jpg"> </div> <div class="item"> <img src="http://cdn.anitur.com.tr/resimler/normal/2017-01/banner_PYo0aKYQiz6VN3XF1rTGunknown-2.jpeg" data-tablet="http://www.anitur.com.tr/blog/wp-content/uploads/2016/03/Silversea-cruise-1024x657.jpg" data-mobil="http://www.anitur.com.tr/blog/wp-content/uploads/2016/06/Karadeniz24-372x221.jpg"> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
2 个解决方案
解决方案1
1 2017-02-03 12:25:32
您正在隐藏该项目，但是就滑块而言，它仍然存在，这就是为什么看到空白的原因。 您需要将.remove() ，或者如果以后需要将其恢复，请使用.detach()
https://api.jquery.com/detach/
if ($(value).data('tablet') == undefined) {
var hidden = $(value).parent(".item").detach()
}
然后在您想要将其带回的代码块中
if (hidden) {
hidden.appendTo('target you want it added to')
}
解决方案2
1 已采纳 2017-02-03 12:40:37
尝试下面的代码。 我已经在本地设置中对其进行了测试。
希望这可以帮助。
function makeResize() {
var imageSrc = $(".main-carousel img");
if ($(window).width() <= 768 && $(window).width() > 480) {
$(imageSrc).each(function(key, value) {
if ($(value).data('tablet') == undefined)
if($(value).parent("div").hasClass("active"))
{
$(value).parent("div").removeClass("item active").css('display','none');
$(value).parent("div").next("div").addClass("active");
}
else
{
$(value).parent("div").removeClass("item active").css('display','none');
}
else {
$(value).attr('src', $(value).data('tablet'));
$(value).parent("div").addClass("item").css('display','');
}
});
} else if ($(window).width() <= 480) {
$(imageSrc).each(function(key, value) {
if ($(value).data('mobil') == undefined) {
if($(value).parent("div").hasClass("active"))
{
$(value).parent("div").removeClass("item active").css('display','none');
$(value).parent("div").next("div").addClass("active");
}
else
{
$(value).parent("div").removeClass("item active").css('display','none');
}
} else {
$(value).attr('src', $(value).data('mobil'));
$(value).parent("div").addClass("item").css('display','');
}
});
} else {
$(imageSrc).each(function(key, value) {
$(value).attr('src', $(value).data('src'));
$(value).parent("div").addClass("item").css('display','');
$(value).show();
});
}
}
图像在内部无法正确显示<div style=“display:none;”>
[英]Image not display correctly inside <div style=“display:none;”>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.