1

我有一个用 jshowoff[1] 制作的幻灯片。我把重要的部分复制到这里。请看一看。

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
  <style>
    #features {
      position: relative;
      overflow: hidden;
      width: 300px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="banner" id="mid_banner">
    <div class="jshowoff jshowoff-1" style="position: relative;">
      <div id="features" style="position: relative;">
        <a href="/">
          <img src="https://panthi.lk/test/one.png" width="100%" height="100%">
        </a>
        <a href="/">
          <img src="https://panthi.lk/test/two.png" width="100%" height="100%">
        </a>
        <a href="/">
          <img src="https://panthi.lk/test/three.png" width="100%" height="100%">
        </a>
      </div>
    </div>
  </div>

  <script type="application/javascript">
    $(document).ready(function() {
      $('#features').jshowoff({
        effect: 'slideLeft',
        changeSpeed: 2500,
        speed: 3000
      });
    });
  </script>

</body>

</html>

您可能会注意到，当新图像滑入时，旧图像在滑出时会变形。发生这种情况是因为图像尺寸大于主 div，并且当新图像滑入较旧的拳头时，会在滑出之前恢复其原始尺寸。

我想解决这个问题。我尝试了很多技巧，但到目前为止没有运气。那里的 CSS 专家，非常感谢您的帮助。我需要的只是一些线索。

[1] https://ekallevig.com/jshowoff/

4

1 回答 1

0

我能够用这个来解决它。

<a href="/" style="height: 100%; width: 100%;">


<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
  <style>
    #features {
      position: relative;
      overflow: hidden;
      width: 300px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="banner" id="mid_banner">
    <div class="jshowoff jshowoff-1" style="position: relative;">
      <div id="features" style="position: relative;">
        <a href="/" style="height: 100%; width: 100%;">
          <img src="https://panthi.lk/test/one.png" width="100%" height="100%">
        </a>
        <a href="/" style="height: 100%; width: 100%;">
          <img src="https://panthi.lk/test/two.png" width="100%" height="100%">
        </a>
        <a href="/" style="height: 100%; width: 100%;">
          <img src="https://panthi.lk/test/three.png" width="100%" height="100%">
        </a>
      </div>
    </div>
  </div>

  <script type="application/javascript">
    $(document).ready(function() {
      $('#features').jshowoff({
        effect: 'slideLeft',
        changeSpeed: 2500,
        speed: 3000
      });
    });
  </script>

</body>

</html>

于 2021-03-16T10:01:38.850 回答