Question

我创建了这个简单的幻灯片，但我想知道如何按方向选择不同的div。因此，例如现在正在阅读肖像和风景＆＃34;容器画廊＆＃34;但如果我想要这个div只能在肖像和＆＃34;容器 - 画廊 - 风景＆＃34;只有在风景图像的风景图中我才能达到这个目标？

这是我的小事，看看我的代码及其工作原理http://jsfiddle.net/25q253Lu/

的jQuery

    var currentIndex = 0,
      items = $('.container-gallery div'),
      itemAmt = items.length;

    function movingItems() {
      var item = $('.container-gallery div').eq(currentIndex);
      items.hide();
      item.css('display','inline-block');
    }

    $('.next').click(function() {
      currentIndex += 1;
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
      }
      movingItems();
    });

    $('.prev').click(function() {
      currentIndex -= 1;
      if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
      }
      movingItems();
    });

我的解决方案

我创建了一个不同的var itemsLandscape，然后我关联了我的格局div，因为如果您为相同的var关联不同的值，则只有最后一个值才会被视为有效。示例：var items = 4和var items = 5 then var items = 5，因为第一个值为null。

var currentIndex = 0,
          items = $('.container-gallery div'),
          itemsLandscape = $('.container-gallery-landscape div'),
          itemAmt = items.length;

        function movingItems() {
          var item = $('.container-gallery div').eq(currentIndex);
          var itemLandscape = $('.container-gallery-landscape div').eq(currentIndex);
          items.hide();
          itemsLandscape.hide();
          item.css('display','inline-block');
          itemLandscape.css('display','inline-block');
        }

        $('.next').click(function() {
          currentIndex += 1;
          if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
          }
          movingItems();
        });

        $('.prev').click(function() {
          currentIndex -= 1;
          if (currentIndex < 0) {
            currentIndex = itemAmt - 1;
          }
          movingItems();
        });

Answer 1

我使用CSS orientation media query：

@media (orientation: portrait) {
    .container-gallery-landscape {
        display: none;
    }
}
@media (orientation: landscape) {
    .container-gallery {
        display: none;
    }
}

然后，如果您需要知道在任何给定时间显示哪个div，您可以使用css找出：

if ($(".container-gallery").is(":visible")) {
    // It's visible, we must be in portrait
}

这是一个例子;将它放在iPad或类似设备上，旋转到每个方向，然后单击按钮：

＆＃13;

$("#the-btn").on("click", function() {
  if ($(".container-gallery").is(":visible")) {
    alert(".container-gallery visible");
  } else {
    alert(".container-gallery not visible, so presumably .container-gallery-landscape is");
  }
});

＆＃13;

@media (orientation: portrait) {
  .container-gallery-landscape {
    display: none;
  }
}
@media (orientation: landscape) {
  .container-gallery {
    display: none;
  }
}

＆＃13;

<div class="container-gallery">container-gallery</div>
<div class="container-gallery-landscape">container-gallery-landscape</div>
<input type="button" id="the-btn" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

您可以使用媒体查询。示例：

 @media screen and (orientation: portrait) {
   .landscape {
     display: none;
   }
 }
 @media screen and (orientation: landscape) {
   .portrait {
     display: none;
   }
 }

<div class="landscape">lanscape content</div>
<div class="portrait">portrait content</div>

如何选择哪个div显示何时是不同的方向？

2 个答案: