Question

我正在使用this plugin交换我的图片以响应3屏幕：

desktop，tablet和mobil

我和这个插件一起使用bootstrap carousel。

所以我有3个屏幕分辨率，我也想做一些具体的。所以我想做的是：

如下所示，我的设备属性有3个分辨率：

data-large，data-medium，data-small。

我想检查一下我的屏幕尺寸：

如果我的屏幕大于0px且我的data-small属性为空   或未定义然后显示下一张幻灯片（或隐藏自己）

如果我的屏幕大于480px并且我的data-medium属性是   空或未定义然后显示下一张幻灯片（或隐藏它）

如果我的屏幕大于1024px并且我的data-large属性是   空或未定义然后显示下一张幻灯片（或隐藏它）

我想做什么？

如果我没有移动设备的图像，我想隐藏它们，这就是我要问的原因。而我做不到。

我的项目有.active类可能是我可以处理这个类我试过了但是我没有任何例子吗？

! function(e) {
  e.fn.imageR = function(a) {
    function i(e, i, r, u, n) {
      $mediaQuery < a.large ? $mediaQuery < a.medium ? $mediaQuery < a.small || (n ? e.attr("src", i) : e.css("background-image", "url(" + i + ")")) : n ? e.attr("src", r) : e.css("background-image", "url(" + r + ")") : n ? e.attr("src", u) : e.css("background-image", "url(" + u + ")")
    }

    function r() {
      $imageR.each(function() {
        var e = jQuery(this),
          a = e.data("small"),
          r = e.data("medium"),
          u = e.data("large"),
          n = !1;
        (void 0 === r || null === r) && (r = u), (void 0 === a || null === a) && (a = r), e.is("img") && (n = !0), i(e, a, r, u, n)
      })
    }
    var u = {
      small: "0",
      medium: "480",
      large: "1024"
    };
    a = e.extend(u, a), $imageR = jQuery(this), $mediaQuery = jQuery(window).width(), r(), jQuery(window).on("resize", function() {
      $mediaQuery = jQuery(window).width(), r()
    })
  }
}(jQuery);
$(document).ready(function() {
  $(".lazy_banner").imageR({
    small: "0",
    medium: "480",
    large: "1024"
  });
  lazyBanner();
});

function lazyBanner() {
  var s = $(window).width();
  if (s > 1024) {
    $.each($(".active img"), function() {
      var lgData = $(this).data('large');
      if (lgData == "" || lgData == undefined) {
        $('#myCarousel').carousel('next');
      }
    })
  } else if (s > 480) {
    $.each($(".active img"), function() {
      var mdData = $(this).data('medium');
      if (mdData == "" || mdData == undefined) {
        $('#myCarousel').carousel('next');
      }
    })
  } else if (s > 0) {
    $.each($(".active img"), function() {
      var smData = $(this).data('small');
      if (smData == "" || smData == undefined) {
        $('#myCarousel').carousel('next');
      }
    })
  }
}

$(window).on('resize load', function() {
  lazyBanner();
});

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  width: 100%;
  height: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img class="lazy_banner" data-large="https://image.ibb.co/dh3MSk/desktop_1.jpg" data-medium="" data-small="https://image.ibb.co/bVYc05/mobil.jpg">
      </div>
      <div class="item">
        <img class="lazy_banner" data-large="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg" data-medium="https://images.pexels.com/photos/30865/pexels-photo-30865.jpg" data-small="https://images.pexels.com/photos/122429/leaf-nature-green-spring-122429.jpeg">
      </div>

      <div class="item">
        <img class="lazy_banner" data-large="" data-medium="https://www.jssor.com/demos/img/gallery/980x380/013.jpg" data-small="https://www.jssor.com/demos/img/gallery/980x380/015.jpg">
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

CodePen Demo

Answer 1

您可以实施以下

 $( window ).resize(function() {
         if($(window).width() < 600) { // set desired width condition
             $.each($(".carousel-inner img"), function(){
                   if($(this).attr("data-small") == "")
                      $(this).fadeOut("slow");
             })
         }
    });

如何在屏幕尺寸上隐藏元素？

1 个答案: