修改 Github 的 html 代码

Question

我使用了以下link的代码来创建幻灯片，

它确实适用于四张图片，我有 5 张图片，我无法为 5 张图片整理出来，

谁能帮帮我。谢谢

Answer 1

您首先需要修复两件事，宽度计算为 710 * N，其中 N 在示例 4 中。因此您需要先从以下位置修补此行：

width: 2840px; /* 710 * 4 */

至：

width: 3550px /* 710 * 5 */

下一步是扩展关键帧以显示第五个元素，然后您还需要重新计算百分比不难从：

@keyframes slideshow {
    0%  { margin-left:  0.5%; }
    25% { margin-left: -100%; }
    50% { margin-left: -200%; }
    75% { margin-left: -300%; }
}

至：

@keyframes slideshow {
    0%  { margin-left:  0.5%; }
    20% { margin-left: -100%; }
    40% { margin-left: -200%; }
    60% { margin-left: -300%; }
    80% { margin-left: -400%; }
}

您现在可以省略 AFIK 所有其他前缀。还检查这个提琴手作为例子：http://jsfiddle.net/avze5shj/

根据评论，我用更好的时机扩展了示例：http://jsfiddle.net/avze5shj/1/

修改 Github 的 html 代码

Modifying the html codes of Github

html

css

slideshow