Start/Stop Slider

Vor einiger Zeit habe ich ein Tutorial zu einem Featured Content Slider gemacht. Es war gut, aber die Anpassungsmöglichkeiten waren etwas begrenzt. Die zwei am häufigsten gewünschten Funktionen waren das Hinzufügen/Entfernen von „Panels“ und eine Stopp/Start-Schaltfläche.

Ich freue mich, sagen zu können, dass ich mit diesem neuen Slider etwas dazu beitragen konnte. Es ist kein Plugin, daher ist es nicht so einfach, wie es sein könnte, aber es ist viel einfacher. Am Ende gibt es einen Abschnitt zur Anpassung. Der Slider verfügt über eine Stopp/Start-Schaltfläche, und die Animation geht etwas über das einfache Schieben nach links hinaus.

Das HTML-Markup

Das Markup ist extrem schlank. Einfach ein Container, der den Bereich umschließt und Überlauf ausblendet, dann ein „Mover“ darin, der das Schieben bewirkt, und darin dann die Slides.

Beachten Sie, dass es kein Markup für eine Stopp-Schaltfläche gibt. Diese gehört nicht ins Markup, denn ohne JavaScript wäre sie nutzlos. Wir werden sie über JavaScript anwenden. Beachten Sie auch, dass die erste Folie eine eindeutige ID hat. Wir werden diese als unsere „Testfolie“ verwenden, um mit JavaScript Breiteninformationen zu sammeln.

<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>

Das 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; }

Hier gibt es nicht viel zu besprechen, vieles davon sind lediglich darstellerische Entscheidungen. Funktional ist die relative Position von #mover wichtig und für den Schiebeeffekt notwendig. Ebenso ist die absolute Positionierung der img-Elemente wichtig. Mit diesem CSS und ausgeschaltetem JavaScript wird der Slider die erste Folie anzeigen und das war's (ideal, wenn Sie mich fragen).

Das jQuery JavaScript

90% dessen, was wir hier tun, ist spezifisch für jQuery. Das macht die Dinge viel einfacher. Wir müssen sicherstellen, dass diese Bibliothek vor dem Rest unseres Skripts geladen wird.

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

Ganz oben in unserer Datei startstop-slider.js befindet sich eine einzelne, selbsterklärende Variable

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

Dann beginnen wir mit unserer Bearbeitung, nachdem das DOM bereit ist, natürlich. Als Erstes hängen wir die Stopp/Start-Schaltfläche an den Slider an. CSS ist bereits vorhanden, um sie zu positionieren und zu gestalten.

$(function() {

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

});

Als Nächstes müssen wir ein wenig schlau werden und anfangen herauszufinden, womit wir es zu tun haben. Die Anzahl der Folien und ihre Breiten sind entscheidende Informationen für unseren Slider. Anstatt sie fest zu codieren, verwenden wir jQuery, um sie zu zählen und ihre Breite zu ermitteln. Das Zählen ist einfach, die Breite ist etwas komplizierter, da wir drei CSS-Werte (Breite, paddingLeft, paddingRight) abrufen, parsen und addieren müssen.

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);

Jetzt müssen wir Code schreiben, der die Schiebeaktion handhabt. Es gibt zwei Stellen, an denen wir die Animation potenziell starten möchten. Eine ist direkt beim Laden der Seite, die andere, wenn auf die Schaltfläche „Start“ geklickt wird. Aufgrund dieser beiden unterschiedlichen Stellen ist es sinnvoll, unsere Animation in eine Funktion zu verpacken und sie nach Bedarf aufzurufen (DRY: Don't Repeat Yourself).

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
				});
			});
		});
	}
}

In einfacher Sprache: Überprüfen Sie, wo sich der Slider befindet. Wenn er sich im letzten Panel befindet, gehen Sie zurück zum ersten Panel. Andernfalls bewegen Sie sich um eine Panel-Länge nach vorne. Beachten Sie die Verschachtelung der .animate()-Funktionen. Die animate-Funktion hat ein Callback-Ereignis, das ausgeführt wird, wenn die Animation abgeschlossen ist. Damit unsere Animationen nacheinander (statt alle auf einmal) ablaufen, verwenden wir die Callbacks. So animiert es zuerst das Bild hoch, dann den Mover nach rechts und dann das Bild wieder nach unten, in dieser Reihenfolge.

Beachten Sie, dass wir die Variablen width und „tooFar“ übergeben, da die Funktion diese benötigt und sie keine globalen Variablen sind. Außerdem gibt es eine kleine Korrektur für IE, die Eric Wendelin für mich behoben hat, wo der linke Wert auf bizarre Weise wieder auf „auto“ anstatt auf „0“ gesetzt wird.

„Auto Play“

JavaScript bietet die perfekte integrierte Funktion für ein „automatisch abspielendes“ Widget wie unseres: SetInterval(); Wir werden es verwenden, um unsere Funktion aufzurufen

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

Die Variable „sliderIntervalID“ ist nicht zwingend erforderlich, ermöglicht uns aber später, clearInterval() mit dieser ID aufzurufen, um sie zu stoppen. Entscheidend für die gewünschte Funktionalität.

Alles, was jetzt noch übrig ist, ist das Stoppen und Starten mit unserer kleinen Schaltfläche zu codieren

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

Die Schaltfläche beginnt mit der Aufschrift „Stop“, da wir die Animation direkt beim Laden der Seite gestartet haben. Das ist sinnvoll. Wenn also auf diese Schaltfläche geklickt wird, prüft sie und sieht, ob der Text weiterhin „Stop“ lautet. Wenn ja, stoppt sie das laufende Intervall und ändert den Text in „Start“. Magie.

Wenn auf die Schaltfläche geklickt wird und sie etwas anderes als „Stop“ anzeigt (wie wenn sie „Start“ anzeigt), startet die Schaltfläche die setInterval-Funktion erneut und ändert den Schaltflächentext zurück zu „Stop“. Einfach und schön.

Anpassung

Um ein weiteres Panel hinzuzufügen, fügen Sie einen weiteren Div innerhalb des #mover hinzu

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

Das ist alles! Der Code ist intelligent genug, um ihn zu erkennen und zu wissen, was zu tun ist. Sie können sogar das CSS ändern, und es sollte überleben.