Question

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

我的实际HTML已使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul id="myTable"> <li><span data-myData="01">first value</span></li> <li><span data-myData="02">second value</span></li> <li><span data-myData="03">third value</span></li> </ul> <button id="myButton">click me</button>标记根据显示端口的方向，纵向或横向设置特定图像。幻灯片演示教程使用<picture>，其中包含多个<ul>元素来设置幻灯片的图片。

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

这是我的代码的一部分：

HTML：

<picture>

CSS：

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

所以目前相应的图片正在滑出屏幕并再次返回，一次。我希望有5张图片，全部有2个版本，具体取决于视口的方向）连续滑动。它是网页的某种标题。有关如何做到这一点的任何建议吗？

Answer 1

WHATWG's standard表示picture标记内的内容应为零个或多个源，后跟img标记（并且可选地与支持脚本的元素混合）。 ol和ul代码均不属于列出的类型，因此不属于picture代码。

将picture标记放在ol或ul标记中;毕竟，这是一个图片列表，而不是列表的图片（虽然我不能100％肯定...）。这应解决方向相关图像的问题。

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

请记住，使用这种创建节目卷轴的方法并不是非常灵活，因为当您想要添加/删除图像时，您需要重新设计每个图像的时间。另外不要忘记最后的图像必须在结尾处返回以使其看起来平滑。

通过在运行snippit时选择“完整页面”，您可以通过调整浏览器大小来操纵客户端大小（以及方向）。希望这可以帮助。

nth-child

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

html图片标签和列表标签相结合

1 个答案: