jquery 图像滑块_带字幕HTML5自适应图像滑块

jquery 图像滑块

After students and site visitors see the responsive CSS3 Image Slider, one of their first questions is usually “how can I add a caption for each image?”

在学生和站点访问者看到响应式CSS3 Image Slider之后 ，他们的第一个问题通常是“如何为每个图像添加标题？”

The solution is fairly straightforward, especially if you use HTML5 semantic markup. As this already uses the basic code, I won’t repeat an explanation of the animation itself, which you can read in the original article. Instead, I’ll focus on how to style and use the new elements.

该解决方案非常简单，尤其是在使用HTML5语义标记的情况下。 由于它已经使用了基本代码，因此我不再重复对动画本身的解释，您可以在原始文章中阅读该解释。 相反，我将专注于如何设置样式和使用新元素。

HTML (The HTML)

By comparison to the original example, the markup reflects the fact that each picture is now surrounded by a <figure> element:

通过与原始示例进行比较，标记反映了以下事实：每个图片现在都被<figure>元素包围：

<div id="captioned-gallery">
	<figure class="slider">
		<figure>
			<img src="hobbiton-lake.jpg" alt>
			<figcaption>Hobbiton, New Zealand</figcaption>
		</figure>
		<figure>
			<img src="wanaka-drowned-tree.jpg" alt>
			<figcaption>Wanaka, New Zealand</figcaption>
		</figure>
		<figure>
			<img src="utah-peak.jpg" alt>
			<figcaption>Utah, United States</figcaption>
		</figure>
		<figure>
			<img src="bryce-canyon-utah.jpg" alt>
			<figcaption>Bryce Canyon, Utah, United States</figcaption>
		</figure>
		<figure>
			<img src="hobbiton-lake.jpg" alt>
			<figcaption>Hobbiton, New Zealand</figcaption>
		</figure>
	</figure>
</div>

(I’ve deliberately left the alt attribute blank in this case to save on space, but you should enter an appropriate description for accessibility).

(在这种情况下，为了节省空间，我故意将alt属性留为空白，但是您应该输入适当的说明以实现可访问性 )。

CSS (The CSS)

The <figure> elements effectively take the place of the images in the original slider, as shown in the CSS (sans vendor prefixes to save space):

<figure>元素有效地代替了原始滑块中的图像，如CSS中所示( 没有 供应商前缀以节省空间)：

div#captioned-gallery {
	width: 100%;
	overflow: hidden;
}
figure { margin: 0; }
figure.slider {
	position: relative;
	width: 500%;
	font-size: 0;
	animation: 40s slidy infinite; 
}
figure.slider figure { 
	width: 20%;
	height: auto;
	display: inline-block;
	position: inherit; 
}

font-size and margin are set to 0 to suck all the air out of the parent <figure> element and its children, which are placed side-by-side by applying display: inline-block. Those same children inherit relative positioning from their parent, which will come in handy in just a moment.

font-size和margin设置为0可以从父<figure>元素及其子元素中吸出所有空气，它们通过应用display: inline-block并排放置。 这些相同的孩子从他们的父母那里继承了相对的位置，这很快就会派上用场。

figure.slider img {
	width: 100%;
	height: auto;
}
figure.slider figure figcaption {
	position: absolute;
	bottom: 0;
	background: rgba(0,0,0,0.3);
	color: #fff;
	width: 100%;
	font-size: 2rem;
	padding: .6rem;
}

I’ve used the old trick of positioning an absolute element inside an relative container to ensure that each caption is always at the bottom of its associated image. font-size is reset, and the caption given a color and rgba background so that the text always remains readable, no matter what photograph is behind it.

我使用了将绝对元素放置在相对容器内的古老技巧，以确保每个标题始终位于其关联图像的底部。 font-size被重置，并且标题具有颜色和rgba背景，因此无论后面有什么照片，文本始终保持可读性。

制作自适应字幕 (Making A Responsive Caption)

While the images are responsive, the caption text is not. There are three ways of dealing with that:

当图像响应时，字幕文本却没有。 有三种处理方法：

1. Size the text in vw units rather than rem or em.

   以vw单位而不是rem或em调整文本大小。

2. Resize the text at appropriate breakpoints using @media queries.

   使用@media查询在适当的断点处调整文本大小。

3. Use an @media query to hide the captions entirely when the viewport is too small.

   当视口太小时，使用@media查询可完全隐藏字幕。

In this case, I’ve chosen the second option:

在这种情况下，我选择了第二个选项：

@media screen and (max-width: 500px) { 
	figure.slider figure figcaption {
		font-size: 1.2rem;
	}
}

变化 (Variations)

Alternatively, you could set the captions to be invisible by default, at least until the user hovered over an image:

或者，您可以将字幕设置为默认情况下不可见，至少直到用户将鼠标悬停在图像上为止：

figure.slider figure figcaption {
	position: absolute;
	bottom: -3.5rem;
	background: rgba(0,0,0,0.3);
	color: #fff;
	width: 100%;
	font-size: 2rem;
	padding: .6rem;
	transition: .5s bottom; 
}
figure.slider figure:hover figcaption {
	bottom: 0;
}

This would bring up the caption from the bottom of each image. However, when the slider moved to the next image, the <figcaption> for it would not yet be activated. To solve that, we could make a similar declaration using an adjacent selector:

这将从每个图像的底部弹出标题。 然而，当滑块移动到下一个图像，所述<figcaption>用于将尚未被激活。 为了解决这个问题，我们可以使用相邻的选择器进行类似的声明：

figure.slider figure:hover + figure figcaption { 
	bottom: 0;
}

结论 (Conclusion)

While this works, there’s quite a bit of code repetition and redundancy. In the CSSslidy script I show how to eliminate that using progressive JavaScript.

虽然这行得通，但仍有很多代码重复和冗余。 在CSSslidy脚本中，我展示了如何使用渐进式JavaScript消除这种情况。

翻译自: https://thenewcode.com/831/HTML5-Responsive-Image-Slider-With-Captions

jquery 图像滑块