html 图片标签和列表标签合并

Question

我想创建一个或多或少像这样的纯 CSS3 幻灯片：

我的实际 HTML 已经使用 <picture> 标签根据 display-port 的方向设置特定图像，纵向或横向。幻灯片教程使用 <ul> 和几个 <li> 元素来设置幻灯片的图片。

当我尝试在我的 <picture> 元素中创建 <ul> 和 <li> 元素时，浏览器无法再找到图像。

这是我的部分代码：

HTML:

<div id="image">
  <picture>
    <source media="all and (orientation: portrait)" srcset="images/faust_portrait.jpg">
    <source media="all and (orientation: landscape)" srcset="images/faust_landscape.jpg">
    <img src="images/faust_1024.jpg" alt="faust">
  </picture>
</div>

CSS:

#image {
  width: 100%;
  height: auto;
  line-height: 0;
  animation-name: move;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

#image img {
  width: 100%;
}

所以此刻相应的图片滑出屏幕又滑回来，一次。我想要可能有 5 张图片，所有图片都有 2 个版本，具体取决于视口的方向）连续滑动。是网页的某种header。关于如何做到这一点有什么建议吗？

Answer 1

WHATWG's standard 表示 picture 标签中的内容应该是零个或多个来源，后跟 img 标签（并且可以选择与脚本支持元素混合）。 ol 和 ul 标签是所列类型的 none，因此不属于 picture 标签。

将 picture 标签放在 ol 或 ul 标签中；毕竟，它是图片列表，而不是列表的图片（尽管我不能 100% 确定...）。这应该可以解决方向相关图像的问题。

关于幻灯片部分，您已经链接了一个非常详细的教程。我会说跟随，你最终应该得到想要的结果。在本教程中，每张图片都使用了一个唯一的 ID，您可以使用 nth-child 选择器选择 1 到 5 或您想要的任何数量的图片来替换它们。

请记住，使用这种创建展示卷轴的方法不是很灵活，因为当您希望 add/remove 图像时，您需要重新处理每个图像的时间。也不要忘记最终图像必须在最后 return 以保持它看起来平滑。

当运行时选择 "Full page" 片段允许您通过调整浏览器大小来操纵客户端大小（以及方向）。希望这可以帮助。

.showreel
{
  /* Allow for absolute positionng of the child elements.*/
  position:relative;
  z-index:0;
  overflow:hidden;

  /* Treat "Landscape" as default.*/
  width:64px;
  height:32px;

  /* Remove annoying list-style formatting. */
  list-style:none;
  padding:0;
  margin:0;
}
/* Resize the showreel when in portait mode. */
@media (orientation:portrait){.showreel { width:32px; height:64px;}}

.showreel li
{
  position:absolute;
  left:0; top:0;
}

/* Using the nth-child() selector instead of ids. */
.showreel li:nth-child(1){animation: picture_1 3s linear infinite;}
.showreel li:nth-child(2){animation: picture_2 3s linear infinite;}
/* Repeat a number of time as necessary. */    

/* Timings need to be tweaked for each new image in the reel. */
@keyframes picture_1
{
  0%{top:0; z-index:1;} /* Show first image 1/4 of the time.*/
  25% {top:0; z-index:1;} /* Keeps it in place for the time being.*/
  50% {top:-100%; z-index:0;} /* Move it out of sight, and the other in. */
  75% {top:100%; z-index:0;} /* Return from the bottom. */
  100% {top:0; z-index:1;} /* In view once again. */
}
@keyframes picture_2
{
  0%  {top:100%; z-index:0;}
  25% {top:100%; z-index:0;}
  50% {top:0; z-index:1;}
  75% {top:0; z-index:1;}
  100%{top:-100%; z-index:0;}
}

<ul class="showreel">
  <li>
    <picture>
      <source media="all and (orientation:portait)" srcset="https://i.stack.imgur.com/h2Ojs.png" />
      <source media="all and (orientation:landscape)" srcset="https://i.stack.imgur.com/ZcG03.png" />
      <img src="https://i.stack.imgur.com/h2Ojs.png" alt="Crudely drawn picture depicting a landscape or portrait depending on orientation." />
    </picture>
  </li>
  <!-- Any number of other pictures in the showreel. -->
  <li>
    <!-- I'd advice to use different images, unlike this example. -->
    <picture>
      <source media="all and (orientation:portait)" srcset="https://i.stack.imgur.com/h2Ojs.png" />
      <source media="all and (orientation:landscape)" srcset="https://i.stack.imgur.com/ZcG03.png" />
      <img src="https://i.stack.imgur.com/h2Ojs.png" alt="Same picture as before." />
    </picture>
  </li>
</ul>

html 图片标签和列表标签合并

html picture tag and list tag combined

html

css

slideshow