我想创建一个包含文本(段落和标题)的幻灯片，幻灯片将是无限的(从第一张幻灯片循环到最后一张幻灯片)。这是我到目前为止所做的:
<html>
<head>
<style>
/**** slider ****/
#slider, ul
{
height: 200px;
background-color:rgb(205, 223, 207);
}
#slider
{
margin: auto;
overflow: hidden;
padding: 20px;
border: 1px solid black;
margin-top: 50px;
border-radius: 10px;
box-shadow: 2px 2px 14px black;
position: relative;
width: 600px;
}
#slider li
{
float: left;
position: relative;
width: 600px;
display: inline-block;
height: 200px;
}
#slider ul
{
list-style: none;
position: absolute;
left: 0px;
top: 0px;
width: 9000px;
transition: left .3s linear;
-moz-transition: left .3s linear;
-o-transition: left .3s linear;
-webkit-transition: left .3s linear;
margin-left: -25px;
font-family: century gothic;
color: #666;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
#slider ul
{
-webkit-animation: slide-animation 25s infinite;
}
/* use to paused the content on mouse over */
#slider ul:hover
{
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
/*** Content ***/
.slider-container
{
margin: 0 auto;
padding: 0;
width: 550px;
min-height: 180px;
border-bottom: 1px solid #ccc;
}
.slider-container h2
{
color: orange;
text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.50);
}
.slider-container p
{
margin: 10px 25px;
font-weight: semi-bold;
line-height: 150%;
color:black;
}
/* use to paused the content on mouse over */
#slider ul:hover
{
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
</style>
</head>
<body>
<section id="slider">
<ul>
<li>
<div class="slider-container">
<h2>Header 1</h2>
<p>Paragraph 1</p>
</div>
</li>
<li>
<div class="slider-container">
<h2>Header 2</h2>
<p>Paragraph 2</p>
</div>
</li>
<li>
<div class="slider-container">
<h2>Header 3</h2>
<p>Paragraph 3</p>
</div>
</li>
<li>
<div class="slider-container">
<h2>Header 4</h2>
<p>Paragraph 4</p>
</div>
</li>
</ul>
</section>
</body>
目前遇到的几个问题:
有什么方法可以通过在 url 中键入内容(例如幻灯片唯一 ID)来使幻灯片从一张幻灯片更改为另一张幻灯片？？(如果每张幻灯片都需要唯一的#id，我可以轻松编辑 css 规则).
如何在每张幻灯片的底部添加一个小数字来表示我们当前正在查看的幻灯片？(第 1 页、第 2 页等)
我使用的是最新的 Chrome 版本。
最佳答案
只需给每个幻灯片 div 一个 id 并链接这个: Mypageurl.com/slideshow#slideid
这将跳转到正确的幻灯片
重要!您需要确保每张幻灯片都可以从 Mypageurl.com/slideshow 查看，否则它不会工作，如果幻灯片彼此相邻放置，您可以在主幻灯片容器上使用 overflow-z:scroll 来执行此操作，这也是稍后进行导航的最简单方法
关于html - 包含文本的纯 Css 幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36679997/