HTML图片的标签和列表标签结合

我想创建一个纯CSS3幻灯片或多或少像这样的：HTML图片的标签和列表标签结合

我的实际HTML已经使用了<picture>标签根据显示设置特定的图像港口的方向，纵向或横向。幻灯片教程使用<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个版本）不断滑动。它是网页的某种标题。有关如何做到这一点的任何建议？

来源

2016-11-14 Toni Latenz

WHATWG's standard指示picture标签内的内容应该是零个或多个源后跟img标签（和任选地与脚本的支撑元件混合）。 ol和ul标记不是列出的类型，因此不属于picture标记。

将picture标记替换为ol或ul标记;它是一张图片列表，而不是一个列表的图片（尽管我不能100％确定那个......）。这应该解决取向依赖图像的问题。

至于幻灯片部分，你已经链接了一个非常详细的教程。我会说跟随，你最终应该得到期望的结果。在教程中，每个图片都使用一个唯一的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>

来源

2016-11-14 12:51:44 Yemachu

HTML图片的标签和列表标签结合

回答

相关问题