Html

Question

我正在使用 PHP 和 HTML 创建一个用于教育目的的动态网站。

我一直在尝试创建一个 'slideshow' 就像这个视频中的那样。 https://www.youtube.com/watch?v=L-vBR3vzOe8

但是我一直难以设置所需的宽度和高度（它太小了）。在过去的一个小时里，我一直在研究代码，但我无法弄清楚。

有好心人给我指出正确的方向吗？

我的代码看起来像这样：

CSS代码：

@keyframes slider {

0% {
    left: 0;
}

20% {
    left: 0;
}

25% {
    left: -100%;
}

45% {
    left: -100%;

}

50% {
    left: -200%;

}

70% {
    left: -200%;
}

75% {
    left: -300%;
}

95% {
    left: -300%;
}

100% {
    left: -400%;

}

}

#slider {
    overflow: hidden;

}

#slider figure img {
    width:20%;
    float: left;

}

#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 20s slider infinite; 

}

这是我的 HTML 代码：

  <div id ="slider" >
             <figure>
             <img src ="Images/img1.jpg">
             <img src ="Images/img2.jpg">
             <img src ="Images/img3.jpg">
             <img src ="Images/img4.jpg">

            </figure>
        </div>

提前致谢。

Answer 1

您需要更改 #slider 的宽度（div，ID slider），这是此幻灯片的容器。

最有可能：

滑块div所在的地方，不能大
您使用的图像不够大
其他一些与样式相关的问题，可能难以检测没有对该页面的完全访问权限。

如果您不想使用这种方法创建动态页面，那么您将始终需要根据图像数量更改 figure 的关键帧和宽度。

指向正确的方向 - 更快速的方法是使用像 bxslider 这样的现成库 - 这有很好的记录。

Answer 2

工作样本：JSFiddle

总宽度为 100%，高度为自动

您可以更改#slider 的宽度

#slider {
  overflow: hidden;
  width: 50%;
}

Html - 改变滑块的宽度和高度

Html - Changing Width and Height of a slider

css

php

slider