Question

我有一个想要连续滚动图像的导航。我怎样才能做到这一点？

我曾尝试使用抓取js，但无法正常工作

<nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
  <div class="container-fluid bubbles">
    <div class="navbar-wrapper ">
      <div class="navbar-toggle">
        <button type="button" class="navbar-toggler"> <span class="navbar-toggler-bar bar1"></span> <span class="navbar-toggler-bar bar2"></span> <span class="navbar-toggler-bar bar3"></span> </button>
      </div>
      <a class="navbar-brand" href="#" class="navbar-left"><img src="style/images/POC_images/Ex-bc.png" style="height:100px ;	margin-top: -20px" alt="" /></a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-bar navbar-kebab"></span> <span class="navbar-toggler-bar navbar-kebab"></span> <span class="navbar-toggler-bar navbar-kebab"></span> </button>

    <div class="collapse navbar-collapse justify-content-center ">
      <ul class="navbar-nav navbar-center heading sign bubbles">
        <li class="nav-item">
          <marquee><img src="https://via.placeholder.com/350x150?text=HF" height="50" />

            <img src="https://via.placeholder.com/350x150?text=1" height="50" />
            <img src="https://via.placeholder.com/350x150?text=2" height="50">
            <!--  <img src="https://via.placeholder.com/350x150?text=3" height="60"/> -->
            <img src="https://via.placeholder.com/350x150?text=4" height="50" />
            <img src="https://via.placeholder.com/350x150?text=5" height="100">
          </marquee>
          <!--  <h1 class="heading mb-0">Design Studio</h1> -->
        </li>
      </ul>
    </div>
    <div class="collapse navbar-collapse justify-content-end" id="navigation">
      <ul class="navbar-nav navbar-right">
        <li class="nav-item">
          <a class="navbar-brand" href="#" class="navbar-left"><img src="style/images/POC_images/images/tech1.png" style="height: 100px;padding-bottom: 2%;" alt="" /></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

选取框元素已标记为过时，不应使用：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

如果您可以来回滚动它，并且知道容器的宽度，则可以使用CSS动画来做到这一点，例如：

.nav-item {
    overflow-x: hidden;
    width: 800px;
}
.nav-item img {
    animation: scroll 10s linear 0 infinite alternate both;
}

@keyframes scroll {
    0% {transform: translateX(0);}
    100% {transform: translateX(-800px);}
}

如果您需要进行无限滚动（即，它一直沿相同的方向滚动），下面是针对这种目的编写的简单javascript插件：

https://github.com/JamesCatt/tickerBar.js

如何使用选取框标记创建连续滚动？

1 个答案: