文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在没有JS的情况下，我如何使幻灯片重复呢？

问在没有JS的情况下，我如何使幻灯片重复呢？
EN

Stack Overflow用户
提问于 2021-01-08 17:24:15
回答 2查看 66关注 0票数 1

我目前正在尝试使我的图像幻灯片重复，以便它跳回开始或重复与第一个图像时，幻灯片已经结束。不知怎么不起作用了，我也不明白。

这是我的演示：

​

代码语言：javascript
复制
#logo-gallery-wrapper {
  overflow: hidden;
  position: relative;
}

#logo-gallery {
  animation: scroll-left 220s linear infinite;
  animation-iteration-count: infinite;
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
  display: flex;
}

#logo-gallery .logo-gallery-figure {
  margin: 0;
  padding: 0 1.6rem;
  overflow: hidden;
}

#logo-gallery .logo-gallery-figure img {
  height: auto;
  max-height: 50px;
  position: relative;
  filter: grayscale(1);
  transition: all .4s;
}

#logo-gallery .logo-gallery-figure img:hover {
  filter: grayscale(0);
}

@keyframes scroll-left {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(calc(-1000rem + 100vw))
  }
}
代码语言：javascript
复制
<div id="logo-gallery-wrapper">
  <ul id="logo-gallery">
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
  </ul>
</div>

​

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-01-08 18:09:28

好像起作用了。只是你给了动画一个220来执行，所以需要等待很长时间才能重新启动。

你应该修正翻译的计算，因为它在220年代结束之前就消失了。

最后一个关键帧应该是当前元素宽度，您可以在呈现后检索它，并需要javascript。您可以尝试-100vw，但它也不会准确。

另外，我将速度降低到了20s，但如果需要，您可以将速度降低。其他一切都很好。infinite会做你想做的事。

运行以下代码片段：

​

代码语言：javascript
复制
#logo-gallery-wrapper {
  overflow: hidden;
  position: relative;
}

#logo-gallery {
  animation: scroll-left 20s linear infinite;
  animation-iteration-count: infinite;
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
  display: flex;
}

#logo-gallery .logo-gallery-figure {
  margin: 0;
  padding: 0 1.6rem;
  overflow: hidden;
}

#logo-gallery .logo-gallery-figure img {
  height: auto;
  max-height: 50px;
  position: relative;
  filter: grayscale(1);
  transition: all .4s;
}

#logo-gallery .logo-gallery-figure img:hover {
  filter: grayscale(0);
}

@keyframes scroll-left {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100vw)
  }
}
代码语言：javascript
复制
<div id="logo-gallery-wrapper">
  <ul id="logo-gallery">
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
  </ul>
</div>

​

在commnet之后编辑:使用Javascript

我评论了代码片段中的所有内容，这样就清楚了。但基本上，在计算之后，我使用width创建了内部的关键帧。

​

代码语言：javascript
复制
document.getElementsByTagName("body")[0].onload = createAnimation;

  function createAnimation(){

  let e = document.getElementById("logo-gallery"); // Get the element

  var style = document.createElement('style'); // Create styling element
  style.type = 'text/css'; // Append a css type

  // Now create the dynamic keyFrames (that are depend on logo-gallery final width)
  // Notice that the width of e is given to translateX at 100%
  let keyframes = '\
  @keyframes scroll-left {\
      0% {\
          transform: translateX(0);\
      }\
      100% {\
          transform: translateX(-'+e.scrollWidth+'px);\
      }\
  }';
  style.innerHTML = keyframes; // Set innerHTML of the styling element to the keyframe
  document.getElementsByTagName('head')[0].appendChild(style); // append the element to the head of the document as a stylesheet
  e.setAttribute("style","animation: scroll-left 20s linear infinite; animation-iteration-count: infinite;"); // Give the element its animation properties.

}
代码语言：javascript
复制
#logo-gallery-wrapper {
  overflow: hidden;
  position: relative;
}

#logo-gallery {
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
  display: flex;
}

#logo-gallery .logo-gallery-figure {
  margin: 0;
  padding: 0 1.6rem;
  overflow: hidden;
}

#logo-gallery .logo-gallery-figure img {
  height: auto;
  max-height: 50px;
  position: relative;
  filter: grayscale(1);
  transition: all .4s;
}

#logo-gallery .logo-gallery-figure img:hover {
  filter: grayscale(0);
}
代码语言：javascript
复制
<div id="logo-gallery-wrapper">
  <ul id="logo-gallery">
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
  </ul>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2021-01-08 17:56:33

这是因为图像正无限地向左滚动，当循环结束时，它没有什么可显示的，它只是显示blank.So来解决这个问题，我增加了图像的数量，并且在css文件中做了一些更改，现在我们的代码如下：

​

代码语言：javascript
复制
body{
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo-gallery-wrapper {
    width: 75%;
    height: 5rem;
    overflow: hidden;
    position: relative;
    border: 1px solid red;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  
  #logo-gallery {
    animation: scroll-left 2s infinite linear;
    /* animation-iteration-count: infinite; */
    margin: 0;
    padding: 0;
    position: relative;
    list-style-type: none;
    display: flex;
  }
  
  #logo-gallery .logo-gallery-figure {
    margin: 0;
    padding: 0 1.6rem;
    overflow: hidden;
  }
  
  #logo-gallery .logo-gallery-figure img {
    height: auto;
    max-height: 50px;
    position: relative;
    filter: grayscale(1);
    transition: all .4s;
  }
  
  #logo-gallery .logo-gallery-figure img:hover {
    filter: grayscale(0);
  }
  
  @keyframes scroll-left {
    /* 0% {
      transform: translateX(0)
    } */
    100% {
      /* transform: translateX(calc(-1000rem + 100vw)) */
      transform: translateX(-100vw)
    }
  }
代码语言：javascript
复制
<div id="logo-gallery-wrapper">
        <ul id="logo-gallery">
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
        </ul>
      </div>

​

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

https://stackoverflow.com/questions/65633594

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档