CSSslidy：自动生成的响应式CSS3图像滑块-CSDN博客

本文介绍了一种使用JavaScript自动化创建响应式CSS3图像滑块的方法，解决了关键帧数学、浏览器前缀和无缝过渡的问题。该滑块要求所有图像大小一致，置于`<ul>`元素内，且`<ul>`需应用CSS样式。用户可通过调整脚本中的变量控制动画速度。对于不支持JavaScript或旧版浏览器，提供了简单的CSS降级方案。

摘要由CSDN通过智能技术生成

Today CSS animation can be used to progressively enhance websites. The code for my responsive image slider is a popular way of achieving this, but has three potential impediments for developers:

今天， CSS动画可用于逐步增强网站。我的自适应图像滑块的代码是实现此目标的一种流行方法，但是对开发人员来说存在三个潜在的障碍：

Some find the math for creating keyframes a little daunting, especially when the slider shows more images than the four of the original example.
一些人发现创建关键帧的数学方法有些令人生畏，尤其是当滑块显示的图像比原始示例的四个更多时。
Developers don’t always remember to add browser vendor prefixes.
开发人员并不总是记得添加浏览器供应商前缀。
Duplicating the first image to the end of the filmstrip to create a seamless transition is sometimes neglected, leaving a broken animation.
有时会忽略将第一个图像复制到幻灯片的末尾以创建无缝过渡的过程，从而导致动画损坏。

There’s a very good argument for automating these actions with JavaScript. The result will animate using CSS in all modern browsers, without having to worry about code, frameworks, plugins or prefixes.

关于使用JavaScript自动化这些动作，有一个很好的论据。结果将在所有现代浏览器中使用CSS进行动画处理，而不必担心代码，框架，插件或前缀。

There are just three conditions:

只有三个条件：

All images must be the exact same size.
所有图像都必须完全相同。
The images must be placed within an element with an id of slidy
图片必须放置在id为slidy的元素中
#slidy must be inside a container that has overflow: hidden applied to it.
#slidy必须位于发生overflow: hidden的容器内：已对其进行overflow: hidden 。

The script also has the option of changing the pace of the animation by altering the values of two variables.

该脚本还可以选择通过更改两个变量的值来更改动画的速度。

步骤1 (Step One)

Place the images inside the #slidy element. For this example I’ll use a <figure>:

将图像放在#slidy元素内。在此示例中，我将使用<figure> ：

<div id="slidy-container">
	<figure id="slidy">
		<img src="eyes.jpg" alt>
		<img src="lou.jpg" alt>
		<img src="lucielle.jpg" alt>
		<img src="lucie.jpg" alt>
	</figure>
</div>

I’ve wrapped a <div> around the <figure> to serve as a container.

我将<div>包裹在<figure>周围，以用作容器。

第二步 (Step Two)

The outer container can be given almost any appearance you wish, so long as it has overflow: hidden placed on it:

只要出现overflow: hidden ，外部容器几乎可以具有您想要的任何外观overflow: hidden在其上：

#slidy-container {
	width: 100%;
	overflow: hidden;
}

第三步 (Step Three)

Finally, add the JavaScript to the end of the page:

最后，将JavaScript添加到页面的末尾：

var timeOnSlide = 3,
timeBetweenSlides = 1,
animationstring = 'animation',
animation = false,
keyframeprefix = '',
domPrefixes = 'Webkit Moz O Khtml'.split(' '),
pfx  = '',
slidy = document.getElementById("slidy");
if (slidy.style.animationName !== undefined) {
	animation = true;
}
if ( animation === false ) {
	for ( var i = 0; i < domPrefixes.length; i++ ) {
		if ( slidy.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
			pfx = domPrefixes[ i ];
			animationstring = pfx + 'Animation';
			keyframeprefix = '-' + pfx.toLowerCase() + '-';
			animation = true;
			break;
			}
		}
	}
if ( animation === false ) {
  // animate using a JavaScript fallback, if you wish
	} else {
		var images = slidy.getElementsByTagName("img"),
		firstImg = images[0],
		imgWrap = firstImg.cloneNode(false);
		slidy.appendChild(imgWrap);
		var imgCount = images.length,
		totalTime = (timeOnSlide + timeBetweenSlides) * (imgCount - 1),
		slideRatio = (timeOnSlide / totalTime)*100,
		moveRatio = (timeBetweenSlides / totalTime)*100,
		basePercentage = 100/imgCount,
		position = 0,
		css = document.createElement("style");
		css.type = "text/css";
		css.innerHTML += "#slidy { text-align: left; margin: 0; font-size: 0; 		position: relative; width: " + (imgCount * 100) + "%;  }";
		css.innerHTML += "#slidy img { float: left; width: " + basePercentage + "%; }";
		css.innerHTML += "@"+keyframeprefix+"keyframes slidy {";
		for (i=0;i<(imgCount-1); i++) {
			position+= slideRatio;
			css.innerHTML += position+"% { left: -"+(i * 100)+"%; }";
			position += moveRatio;
			css.innerHTML += position+"% { left: -"+((i+1) * 100)+"%; }";
		}
	css.innerHTML += "}";
	css.innerHTML += "#slidy { left: 0%; "+keyframeprefix+"transform: translate3d(0,0,0); "+keyframeprefix+"animation: "+totalTime+"s slidy infinite; }";
	document.body.appendChild(css);
}

I’ve left a fully commented version of the script on CodePen, together with a GitHub repo. The code is responsive in more ways than one: remove an image from inside the #slidy container or add several, and the JavaScript will always create the correct CSS animation to match.

我已经在CodePen上留下了脚本的完整注释版本以及 GitHub存储库。代码的响应方式不止一种：从#slidy容器内部删除图像或添加多个图像，然后JavaScript始终会创建正确CSS动画来进行匹配。

There are two user-defined variables at the very beginning of the script that you can adjust:

您可以在脚本的开头调整两个用户定义的变量：

timeOnSlide is the amount of time, in seconds, for each image to remain static.
timeOnSlide是每个图像保持静态的时间(以秒为单位)。
timeBetweenSlides is the time to move from any one slide to the next, also in seconds.
timeBetweenSlides是从任何一张幻灯片移动到下一张幻灯片的时间，也以秒为单位。

Both variables can take floating point values. For example, timeBetweenSlides = 1.5, will set a one-and-a-half second transition between each image.

这两个变量都可以采用浮点值。例如， timeBetweenSlides = 1.5,将在每个图像之间设置一个半秒的过渡。

后备 (Fallbacks)

Graceful degradation in older browsers (mostly <IE10) or those blocking JavaScript could be added with a few more lines of CSS:

可以在旧版浏览器(大多为<IE10)或阻止JavaScript的浏览器中进行正常降级，并添加几行CSS：

#slidy {
	margin: 0;
	font-size: 0;
	position: relative;
	width: 400%;
}
#slidy img { width: 25%; }

(This assumes that you have four original images).

(假设您有四个原始图像)。

The result will be a static, responsive image (the first in the series) without animation.

结果将是没有动画的静态响应图像(该系列中的第一幅)。

更新资料 (Update)

Since this article was written CSSslidy has been updated to add captions, alternate slider directions, and more. This code will continue to work, but you may want to check out the latest article if you desire more features.

自从撰写本文以来，CSSslidy已进行了更新，以添加标题，备用滑块方向等。该代码将继续起作用，但是如果您需要更多功能，则可能需要查看最新文章。