个人中心
gpt4 book ai didi

javascript - Bootstrap 轮播图像显示不占用空间的div

转载 作者：行者123 更新时间：2023-12-01 04:03:16 26 4
gpt4 key购买 nike

我有 bootstrap carousel，img 的 carousel 具有 data-mobil 和 data-table 属性，当我调整平板电脑窗口大小时，我的 img src 值一直在变化data-table src 或者当我调整移动窗口大小时，我的 img src 一直在改变宽度 data-mobil src..到目前为止还不错..但同时如果 data-mobil 或 data-tablet 未定义，我的意思是空而不是使其显示:none;但我的显示器不占用空间，为什么？

click to see live example - 调整平板电脑版本的窗口大小

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>

enter image description here

最佳答案

尝试使用下面的代码。我已经在本地设置中测试了它。

希望这有帮助。

  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();
    });
  }
}

关于javascript - Bootstrap 轮播图像显示不占用空间的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42023599/

26 4 0
文章推荐： xcode - 不离开 Xcode 的单元测试
文章推荐： jquery限制添加部分 View
文章推荐： python selenium selenium.common.exceptions.StaleElementReferenceException 错误
文章推荐： jquery - 维基百科 API JSONP 请求被阻止 mime 类型不匹配
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com