css图片幻灯片效果_使用JS和CSS创建简单的全屏图片库幻灯片

css图片幻灯片效果

Right now my 2^nd year students are working on an interactive map for another class. Inevitably, they want to feature some ambitious code in their projects, including a fullscreen web image gallery. Since I haven’t yet officially started teaching them JavaScript, I had to make sure that the solution was very easy to apply. Thus, the code below. I’ve also linked through to the fullscreen example in the example above.

现在我的^第二年级的学生正在为另一个类在互动地图上。 他们不可避免地希望在其项目中加入一些雄心勃勃的代码，包括全屏Web图像库。 由于我还没有正式开始教他们JavaScript ，我必须确保该解决方案非常易于应用 。 因此，下面的代码。 我还链接到上面示例中的全屏示例。

While it would be possible to create a fade-in-out gallery like this in pure CSS, the inclusion of the FullScreen API necessitated some scripting. I decided to take advantage of this and apply the CSS animation to the images via JavaScript, providing the opportunity to add JavaScript-driven UI controls in future versions.

虽然可以在纯CSS中创建像这样的淡入库 ，但是FullScreen API的包含需要一些脚本。 我决定利用此优势，并通过JavaScript将CSS动画应用于图像，从而提供了在以后的版本中添加JavaScript驱动的UI控件的机会。

HTML结构和CSS演示 (HTML Structure & CSS Presentation)

The markup is very simple. For the sake of clarity I am using minimized HTML5: while the code will validate, there’s much that could be done to improve its accessibility.

标记非常简单。 为了清楚起见，我使用的是最小化HTML5 ：虽然代码可以验证 ，但可以做很多事情来改善其可访问性 。

<div id="slideshow-container">
	<figure id="slideshow">
		<img src="dada-voltaire-tinkerbot.jpg" alt>
		<img src="happy-bot-tinkerbot.jpg" alt>
		<img src="sgt-swift-tinkerbot.jpg" alt>
		<img src="xf-3-fandicaff-tinkerbot.jpg" alt>
	</figure>
</div>

The CSS is almost as simple:

CSS几乎一样简单：

@keyframes fadey {
	0% { opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { opacity: 0; }
}
figure#slideshow {
	width: 80%;
	margin: 0 auto;
	position: relative;
}
figure#slideshow img {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: auto;
	opacity: 0;
}
figure#slideshow img:first-child { 
	position: relative;
}

There are a few important points to note:

有几点要注意的要点：

• I’m assuming that the responsive images will expand to fill the screen; you could place a max-width limit on the <figure> element if that was not the case.

  我假设响应图像将扩大以填充整个屏幕。 如果不是这种情况，可以在<figure>元素上设置max-width限制。

• I’ve employed a CSS keyframe animation to create the fade effect for the images. This provides greater ease-of-use in setting the in-out points, compared to Bezier curves in a transition.
  我采用了CSS关键帧动画来为图像创建淡入淡出效果。 与过渡中的贝塞尔曲线相比，这在设置输入点时提供了更大的易用性。

• I’m also assuming you’re using prefix-free or a similar tool to generate the prefixed versions of the keyframe animation.

  我还假设您正在使用无前缀的或类似的工具来生成关键帧动画的前缀版本。

• The first image is position: relative to ensure that the <figure> element is the right size and shape for centering; all other elements are position: absolute so that they can be stacked on top of each other.

  第一个图像是position: relative对于确保<figure>元素具有正确的尺寸和形状以进行居中； 所有其他元素都position: absolute以便它们可以彼此堆叠。

• All code is shown in the latest, prefix-free version for clarity.
  为了清楚起见，所有代码均以最新的无前缀版本显示。

剧本 (The Script)

The entire animation script is as follows:

整个动画脚本如下：

window.onload = function() {
	var imgs = document.getElementById('slideshow').children;
	interval = 8000;
	currentPic = 0;
	imgs[currentPic].style.webkitAnimation = 'fadey '+interval+'ms';
	imgs[currentPic].style.animation = 'fadey '+interval+'ms';
	var infiniteLoop = setInterval(function(){
		imgs[currentPic].removeAttribute('style');
		if ( currentPic == imgs.length - 1) {
			currentPic = 0;
		} else {
			currentPic++;
		}
	imgs[currentPic].style.webkitAnimation = 'fadey '+interval+'ms';
	imgs[currentPic].style.animation = 'fadey '+interval+'ms';
}, interval);
}

The code should be simple to follow: after referencing the images in the <figure> element, I set the time in milliseconds for every image to animate, and indicate that I want the very first picture to start.

该代码应易于遵循：在引用<figure>元素中的图像之后，我将为每个图像设置动画的时间(以毫秒为单位)，并指示我希望第一张图片开始。

Then, an infinite loop is set up. The style attribute applied to the current image to animate it is removed; and a counter advanced to animate the next one after the appropriate interval has passed.

然后，建立无限循环。 应用于当前图像以使其具有动画效果的style属性将被删除； 经过适当的时间间隔后，计数器会前进以为下一个动画。

This code is deliberately limited: I’m only building the animations for recent, vendor-prefix-free versions of Firefox and Internet Explorer, together with versions of Safari and Chrome.

这段代码是有意限制的：我只为Firefox和Internet Explorer的最新，无供应商前缀版本以及Safari和Chrome版本构建动画。

导致全屏 (Leading To FullScreen)

For understandable reasons, we can’t just force a browser window fullscreen. Rather, it’s easiest to have the content already on the page, and then create a link or button to make that specific content fullscreen and hide the rest. I’ve introduced the fullScreen code before:

出于可以理解的原因，我们不能只强制浏览器窗口全屏显示。 相反，最简单的方法是在页面上已有内容，然后创建链接或按钮以使该特定内容全屏显示并隐藏其余内容。 我之前介绍了全屏代码 ：

function fullScreen(element) {
	if (element.requestFullscreen) {
		element.requestFullscreen();
		} else if (element.webkitRequestFullscreen ) {
			element.webkitRequestFullscreen();
		} else if (element.mozRequestFullScreen) {
			element.mozRequestFullScreen();
		}
	}

The fullscreen request is typically initiated by a link or button:

全屏请求通常由链接或按钮启动：

<a href=# onclick=" fullScreen(document.getElementById(slideshow)) "> Clicky</a>

This can actually work in your favour: by hiding the gallery at the start and only revealing it when fullscreen mode is initiated, you can effectively preload a number of images before the slideshow begins.

这实际上可以对您有利：通过在开始时隐藏图库，并仅在启动全屏模式时才显示图库，您可以在幻灯片开始之前有效地预加载许多图像。

黑色背景和超大图像 (Black Backgrounds & Overlarge Images)

By default, Firefox expands fullscreen content to its maximum width and fills the background with black. Webkit keeps the black background, but does not increase the image size, instead centering the browser window. This can make fullscreen galleries appear very different, leaving any images extremely large, extending off the bottom edge of the screen while fading in and out over black; not exactly what we are after.

默认情况下，Firefox将全屏内容扩展到最大宽度，并用黑色填充背景。 Webkit的保持了黑色背景，但不增加图像的大小，而不是居中的浏览器窗口。 这会使全屏画廊看起来非常不同，从而使任何图像都变得非常大，从屏幕的底部边缘伸出，同时淡入和淡出黑色。 不完全是我们所追求的。

As I’ve previously discussed, every implementation of the FullScreen mode supports a slightly odd pseudo-class that detects if the element is in fullscreen mode. With that in mind, we can do two things. First, make the outer slider-container element fullscreen, rather than its child:

正如我之前讨论的那样， 全屏模式的每种实现都支持一个稍微奇怪的伪类，该伪类检测元素是否处于全屏模式 。 考虑到这一点，我们可以做两件事。 首先，使外部滑块容器元素(而不是其子元素)全屏显示：

<a href=# onclick="fullScreen(document.getElementById(slideshow-container))">Clicky</a>

Second, ensure that this element has a white background, and centers its children in the window, accounting for a variety of aspect ratios:

其次，确保此元素具有白色背景，并将其子元素置于窗口的中心，以考虑各种长宽比：

#container:fullscreen {
	display: flex;
	justify-content: center;
	align-items: center;
}
#container:fullscreen figure {
	width: 80%;
	margin: 0 auto;
}
:-webkit-fullscreen {
	width: 100%; height: 100%;
}
*:-moz-fullscreen {
	background: #fff;
}

Again, I’m only showing the most recent version of the CSS spec of flexbox to center the content; you can read the entire code in my article Seven Ways To Center With CSS. Note the separate line for Webkit, necessary to ensure that the fullscreen element covers the black background.

同样，我仅显示flexbox CSS规范的最新版本来使内容居中。 您可以在我的文章《 使用CSS集中居中的七种方法》中阅读完整的代码。 请注意Webkit的单独行，以确保全屏元素覆盖黑色背景。

There’s much more we can and will do to this basic setup, but I hope you’ll find this to be a good start.

对于基本设置，我们可以做更多的事情，但我希望您会发现这是一个好的开始。

翻译自: https://thenewcode.com/766/Create-A-Simple-FullScreen-Image-Gallery-Slideshow-With-JS-amp-CSS

css图片幻灯片效果