Question

我正在尝试构建滑块（按钮驱动）。到目前为止，我设法让幻灯片按照我想要的方式移动，如果点击外部容器则重置。测量是通过JQuery进行的。我正在努力重新测量元素：

当Windows动态调整大小时（平板电脑横向与纵向），我正在尝试对元素进行jquery检查大小（宽度）。我创建了功能＆＃34; MeasureDimensions＆＃34;但我不认为它按预期工作。当我调整窗口大小并刷新页面时，它确实有效，但是当我倾斜屏幕时则不行。解决这个问题的最佳方法是什么？

＆＃13;

$(document).ready(function() {
  function MeasureDimensions() {
    var $container = $('.container'),
      $slider = $('.container ul'),
      $box = $('li', $slider),
      W = $container.width(), // Container : 5000px as 5 X 1000px = 5000px
      N = $box.length, // 5 li's within UL 
      C = 0; // Counter

    $slider.width(W * N);

    $('#prev, #next').click(function() {
      C = (this.id == 'next' ? ++C : --C) < 0 ? N - 1 : C % N;
      $slider.stop().animate({
        left: -C * W
      }, 400);

    });

    $(document).mouseup(function(e) {
      var container = $('.container');

      if (!container.is(e.target) && container.has(e.target).length === 0) {
        $slider.stop().animate({
          left: W - W
        }, 400);
        C = 0;
      }
    });

  };

  MeasureDimensions();
  $(window).resize(MeasureDimensions);
  
  //added this :
  
  $(window).on("orientationchange",function(){
 MeasureDimensions();
    
    //no effect?
});

});

＆＃13;

body {
  background: #ccc;
}

.container {
  overflow: hidden;
  width: 1000px;
  background: #333;
  margin: 0 auto;
  position: relative;
}

.container ul {
  list-style-position: outside;
  list-style: none;
  position: relative;
  height: 200px;
  margin: 0;
  padding: 0;
}

.container ul li {
  position: relative;
  text-align: center;
  width: 1000px;
  display: block;
  float: left;
  height: 100%;
  line-height: 200px;
  font-size: 4rem;
  color: #fff;
}

.container ul li:nth-child(even) {
  background: #252E7F;
}

.container ul li:nth-child(odd) {
  background: #121740;
}


/* Buttons 
===========*/

#next,
#prev {
  width: 50%;
  display: block;
  float: left;
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  box-sizing: border-box;
}

#next {
  border-right: 2px solid #fff;
}

.container span:hover {
  background: #7F7F7F;
  transition: ease 0.2s all;
}


@media (max-width: 980px) {
  .container {
    width: 310px;
  }
  
  .container ul li {
    width: 310px;
    font-size:1.5rem;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<section class="container">
  <ul>
    <li>Slide Number One </li>
    <li>Slide Number Two</li>
    <li>Slide Number Three</li>
    <li>Slide Number Four</li>
    <li>Slide Number Five</li>
  </ul>
  <span id="next">Next</span>
  <span id="prev">Previous</span>
</section>

＆＃13;

任何帮助 - 非常感谢。

Windows大小调整元素（Jquery）

0 个答案: