我想创建一个纯CSS3幻灯片,大致如下:
Pure CSS Slideshow
我的实际HTML已经使用<picture>标记根据显示端口的方向、纵向或横向设置特定的图像。
幻灯片演示教程使用<ul>和几个<li>元素来设置幻灯片的图片。
当我试图在<ul>元素中创建<li><picture>元素时,浏览器无法再找到图像。
以下是我的部分代码:
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张图片,根据视窗的方向分为两个版本)连续滑动。它是网页的一种标题。
有什么建议吗?

最佳答案

WHATWG's standard表示picture标记中的内容应为零个或多个源,后跟img标记(并可选地与脚本支持元素混合)。olul标记不是列出的类型,因此不属于picture标记。
picture标签放在olul标签中;它是一个图片列表,而不是一个列表的图片(尽管我不能百分之百确定……)。这将解决与方向相关的图像问题。
至于幻灯片部分,您链接了一个相当详细的教程。我想说,跟着走,你最终会得到想要的结果。在本教程中,每幅图片都使用一个唯一的id,您可以用选择1到5的nth-child选择器或您想要的任何图片数来替换它们。
请记住,使用这种创建显示卷轴的方法并不是非常灵活的,当您希望添加/删除图像时,需要重新修改每个图像的时序。也不要忘记,最终的图像必须在结束时返回,以保持它看起来平滑。
通过在运行snippit时选择“完整页面”,您可以通过调整浏览器的大小来操作客户端大小(从而调整方向)。希望这有帮助。

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

10-07 19:39
查看更多