主页 / 问题 / 1224046
Accepted
Frontender
Asked:2021-12-26 15:53:34 +0800 CST2021-12-26 15:53:34 +0800 CST

如何循环图像滚动？

  • 772

有必要在块内做这样一个循环滚动的图像，它比图像的高度要小。

https://recordit.co/C00z9EAHW0

我执行以下操作，我的图片向上滚动，然后向下滚动并停止。做错了什么？看起来 setInterval 在 2-- 迭代后停止工作。

function scrollImage(block, image) {
  var blockHeight = $(block).height();
  var imageHeight = $(image).height();
  var different = imageHeight - blockHeight;
  setInterval(function() {
    if ($(image).css("top") == "0px") {
      $(image).animate({
        top: -different
      }, 6000);
    } else {
      $(image).animate({
        top: "0px"
      }, 6000);
    }
  }, 1);
}

scrollImage(".js-block1", ".js-image1");
.block1 .image_block {
  height: 300px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
}

.block1 .image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image_block js-block1">
  <img class="image js-image1" src="//via.placeholder.com/150x600" alt="image">
</div>

jquery

1 个回答

  1. Best Answer

    这是一个使用示例.animate

    let el = $('#infinity-scroll'), t = 3000;
    
function Scroll(dir = 0) {
  el.animate({
    scrollTop: dir === 0 ? el.prop('scrollHeight') - el.height() : 0
  }, t, function() {
    Scroll(dir === 0 ? 1 : 0);
  });
} Scroll(0);
    #infinity-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 150px;
  overflow: hidden auto;
}

#infinity-scroll img {
  display: block;
  width: calc(100% / 3);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="infinity-scroll">
  <img src="https://via.placeholder.com/300/f88/333">
  <img src="https://via.placeholder.com/300/8f8/333">
  <img src="https://via.placeholder.com/300/88f/333">
  
  <img src="https://via.placeholder.com/300/8f8/333">
  <img src="https://via.placeholder.com/300/88f/333">
  <img src="https://via.placeholder.com/300/f88/333">
  
  <img src="https://via.placeholder.com/300/88f/333">
  <img src="https://via.placeholder.com/300/f88/333">
  <img src="https://via.placeholder.com/300/8f8/333">
</div>

    有一张图片但没有 JS 的变体

    .img {
  display: block;
  width: 100%;
  height: 200px;
  background: url('//i.imgur.com/nkvcs4O.png') no-repeat top center / 100% auto;
  animation: Scroll 3s linear infinite alternate;
}

@keyframes Scroll {
  to {
    background-position: bottom center;
  }
}
    <div class="img"></div>

    • 0

相关问题