Question

编辑：建议的重复线程和我的线程之间的区别是我想知道如何只定位可见的img并为它打开和关闭一个类。

我有一个有趣的情况，我希望得到一些帮助。在我进一步讨论之前，这是网站：www.travelandlifestylephotography.com

我在该网站上使用fullpage.js。但是我想做一些超出该插件范围的事情，所以我需要一些帮助，因为我只是学习HTML / CSS而且对Javascript几乎一无所知。

这就是我想要做的事情：我希望活动幻灯片上的背景图片从“background-size：cover”变为“background-size：contains”用户按下“空格”键。如果他们再次按空格键，我希望图像返回“background-size：cover”。当我说“活动”幻灯片时，我的意思是fullpage.js将“活动”类添加到当前正在查看的“幻灯片”类中。我希望此更改仅影响正在查看的幻灯片的背景图像，而不影响任何其他幻灯片。

如何编码：

<div class="slide loading">
    <img class="lifestyle1 background_cover" /> 
</div>

这样的CSS：

.lifestyle1 {
    background-image: url("/img/lifestyle/1Lifestyle.jpg");
    background-repeat: no-repeat;
    background-position: center 30%;
    width: 100%;
    height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    z-index: -1;
}

.background_cover {
    background-size: cover;
}

所以你可以看到，如果我能以某种方式从活动图像中删除“background_cover”类，背景图像将恢复为“background-size：contain”。

所以，这是我的问题。我希望它清晰简洁。：）提前致谢。如果您需要更多信息，请与我们联系。

Answer 1

您可以使用以下功能：

left = (total + 1) / 2

绑定到keyup可确保在按住键时不会重复调用该函数。

.slide.active为您提供当前选定的幻灯片。

仅从可见的<img/>代码

1 个答案: