文章/答案/技术大牛

发布

社区首页 >问答首页 >使用inset旋转幻灯片时，幻灯片中的图像会失真

问使用inset旋转幻灯片时，幻灯片中的图像会失真
EN

Stack Overflow用户

提问于 2021-03-15 03:06:29

回答 1查看 33关注 0票数 1

我有一个用jshowoff1制作的幻灯片。我把重要的部分复制到这里。请看一下。

<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专家，非常感谢您的帮助。我需要的只是一些线索。

css

jshowoff

javascript

html

回答 1

Stack Overflow用户

发布于 2021-03-16 18:01:39

我可以用这个来修复它。

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66628479

复制

相似问题

问使用inset旋转幻灯片时，幻灯片中的图像会失真
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用inset旋转幻灯片时，幻灯片中的图像会失真EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用inset旋转幻灯片时，幻灯片中的图像会失真
EN