Question

我想创建一个包含文本（段落和标题）的幻灯片，幻灯片将是无限的（从第1张到最后一张幻灯片循环播放）。这就是我到目前为止所做的：

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

到目前为止我遇到的一些问题：

有没有什么方法可以通过在网址中输入内容（例如幻灯片唯一ID）将幻灯片从一个更改为另一个？（如果每个幻灯片需要唯一的#id，我可以轻松编辑css规则））。

如何在每张幻灯片的底部添加一个小数字来表示我们当前正在查看的幻灯片？（第1页，第2页等）

我正在使用最新的Chrome版本。

Answer 1

只需给每个幻灯片div一个id并做这个： Mypageurl.com/slideshow#slideid

这将跳转到正确的幻灯片

重要！您需要设置Shure每个幻灯片都可以从Mypageurl.com/slideshow查看，否则它不会工作，你可以使用overflow-z：滚动你的主幻灯片容器如果幻灯片放在彼此旁边，这也是最简单的方法稍后进行导航

Answer 2

浏览以下链接，希望他们能够更好地帮助您： Gallery CSS

Github: CSS Slider

W3Schools Sildeshow

纯Css幻灯片包含文本

2 个答案: