开始/停止滑块

不久前，我做了一个关于 特色内容滑块 的教程。 它很不错，但在自定义可能性方面有点有限。 最常要求的功能是添加/删除“面板”和一个停止/启动按钮。

我很高兴地说，我能够在这个新的滑块中进行一些调整。 它不是插件，所以它不像可能的那样容易，但它容易得多。 文末有一个用于自定义的部分。 滑块确实带有停止/启动按钮，并且动画比简单地向左滑动走得更远。

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 值（宽度、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” 变量，因为该函数需要它们，并且它们不是全局变量。 此外，还有一个针对 IE 的小修复，由 Eric Wendelin 为我修复，其中左值被奇怪地设置为“auto”而不是“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");
	}
});

按钮最初显示“停止”，因为我们在页面加载时启动了动画。 这是有道理的。 因此，当该按钮被点击时，它会检查并查看该文本是否仍然是“停止”，如果是，它会停止正在运行的间隔并将文本更改为“开始”。 魔法。

如果按钮被点击并且它显示的不是“停止”（比如它显示“开始”时），该按钮将再次启动 setInterval 函数并将按钮文本更改回“停止”。 简单而美好。

如何自定义

要添加另一个面板，请在 #mover 内部添加另一个 div

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

就是这样！ 该代码足够智能，可以识别它并知道该怎么做。 您甚至可以更改 CSS，它应该能够存活。