启动/停止滑块

不久前，我在Featured Content Slider上做了一个教程。 它很整洁，但是在定制可能性方面有些限制。 最需要的两个功能是能够添加/删除“面板”和一个“停止/开始”按钮。

我很高兴地说，我可以在这个新滑块中容纳一些东西。 它不是一个插件，因此虽然不像它可能的那么简单，但是要容易得多。 末尾有一个用于自定义的部分。 滑块确实具有“停止/开始”按钮，并且动画比向左滑动更远。

查看演示 下载文件

HTML标记

标记非常轻。 只是一个包含该区域并隐藏溢出的包裹，然后在其中进行滑动的“移动器”，然后在其中滑动。

注意，停止按钮没有标记。 那不属于标记，因为如果没有JavaScript，它将毫无用处。 我们将通过JavaScript进行应用。 另请注意，第一张幻灯片具有唯一的ID。 我们将其用作“测试幻灯片”以使用JavaScript收集宽度信息。

<div id="slider">

	<div id="mover">

		<div id="slide-1" class="slide">
		
			<h1>Garden Rack</h1>
			
			<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
			
			<a href="#"><img src="images/slide-1-image.png" alt="learn more" /></a>
			
		</div>

		... additional slides follow format of this one, except no need for ID ... 
	
	</div>

</div>

CSS

#slider          { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
                   position: relative; margin: 50px 0; }
#mover           { width: 2880px; position: relative; }
.slide           { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1        { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
                   color: #ac0000; }
.slide p         { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img       { position: absolute; top: 20px; left: 400px; }
#slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
                   padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

这里没有太多要讨论的内容，其中很多只是表示性的选择。 从功能上讲，＃mover上的相对位置很重要，并且对于滑动效果也是必需的。 同样，在img元素上的绝对定位也是如此。 启用此CSS，但禁用JavaScript后，滑块将显示第一张幻灯片，仅此而已（理想情况下，如果您问我）。

jQuery JavaScript

我们在这里所做的90％是针对jQuery的。 使事情变得容易得多。 我们需要确保在其余脚本之前已加载库。

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/startstop-slider.js"></script>

在我们的startstop-slider.js文件顶部，是一个不言自明的变量

// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
var delayLength = 4000;

然后，在准备好DOM之后，我们将开始进行操作。 我们要做的第一件事是将“停止/开始”按钮附加到滑块上。 CSS已经到位并对其进行样式设置。

$(function() {

	$("#slider").append('Stop ');

});

接下来，我们需要变得聪明一点，并开始弄清楚我们正在处理的内容。 幻灯片的数量及其宽度是我们滑块重要的信息。 我们将使用jQuery对它们进行计数并确定其宽度，而不是对其进行硬编码。 计数很容易，宽度要复杂一些，因为我们需要提取三个CSS值（width，paddingLeft，paddingRight）来解析它们，然后将它们相加。

var $slide1 = $("#slide-1");

var panelWidth = $slide1.css("width");
var panelPaddingLeft = $slide1.css("paddingLeft");
var panelPaddingRight = $slide1.css("paddingRight");

panelWidth = parseFloat(panelWidth, 10);
panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
panelPaddingRight = parseFloat(panelPaddingRight, 10);

panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
	
var numPanels = $(".slide").length;
var tooFar = -(panelWidth * numPanels);

现在我们需要编写代码来处理滑动动作。 我们可能希望在两个地方开始动画。 加载页面时一个正确，而按下“开始”按钮时另一个正确。 由于这两个不同的地方，将动画包装在一个函数中并根据需要调用它是很有意义的（ DRY ：请勿重复自己）。

function doMove(panelWidth, tooFar) {
	var leftValue = $("#mover").css("left");
	
	// Fix for IE
	if (leftValue == "auto") { leftValue = 0; };
	
	var movement = parseFloat(leftValue, 10) - panelWidth;
	
	if (movement == tooFar) {
		$(".slide img").animate({
			"top": -200
		}, function() {
			$("#mover").animate({
				"left": 0
			}, function() {
				$(".slide img").animate({
					"top": 20
				});
			});
		});
	}
	else {
		$(".slide img").animate({
			"top": -200
		}, function() {
			$("#mover").animate({
				"left": movement
			}, function() {
				$(".slide img").animate({
					"top": 20
				});
			});
		});
	}
}

用简单的英语 ：检查并查看滑块在哪里。 如果在最后一个面板上，请移回第一个面板。 否则，向前移动一个面板长度。 注意.animate（）函数的所有嵌套。 animate函数具有一个回调事件，该事件在动画完成时运行。 因此，为了使动画一个接一个地运行（而不是一次运行），我们使用了回调。 因此，现在它将图像按动画顺序向上移动，移至上方，然后按该顺序向下移动图像。

请注意，虽然函数需要，但我们传入了width和“ tooFar”变量，它们不是全局变量。 此外，还有Eric Wendelin为我修复的IE修复程序，其中的左值异常设置为“自动”，而不是“ 0”。

“自动播放”

JavaScript为像我们这样的“自动播放”窗口小部件提供了完善的内置功能：SetInterval（）; 我们将使用它来调用我们的函数：

sliderIntervalID = setInterval(function(){
	doMove(panelWidth, tooFar);
}, delayLength);

不需要“ sliderIntervalID”变量，但是它允许我们以后使用该ID调用clearInterval（）来停止它。 对于我们所需的功能至关重要。

现在剩下的就是用我们的小按钮编写停止和开始代码：

$("#slider-stopper").click(function(){
	if ($(this).text() == "Stop") {
		clearInterval(sliderIntervalID);
	 	$(this).text("Start");
	}
	else {
		sliderIntervalID = setInterval(function(){
			doMove(panelWidth, tooFar);
		}, delayLength);
	 	$(this).text("Stop");
	}
});

该按钮开始说“停止”，因为我们在页面加载时立即触发了动画。 这就说得通了。 因此，单击该按钮时，它将检查并查看该文本是否保持“停止”，如果是，则停止正在运行的时间间隔并将文本更改为“开始”。 魔法。

如果单击该按钮并且显示“ Stop”（停止）以外的内容（就像说“ Start”（开始）时一样），则该按钮将再次触发setInterval函数，并将按钮文本更改回“ Stop”。 简单而美丽。

如何定制

要添加另一个面板，请在#mover中添加另一个div：

<div class="slide">
   <h1>Name of Slide</h1>
   ...etc
</div>

而已！ 该代码足够聪明，可以将其提取并知道该怎么做。 您甚至可以在CSS周围进行更改，它应该可以生存。

翻译自: https://css-tricks.com/startstop-slider/