#10 – Video Tutorial – jQuery Slideshow

Ich habe bei den jQuery Tutorials aus meinem Blog Eintrag eine jQuery Slideshow ausgewählt, bei der wir in diesem Video Tutorial den jQuery Code nachbauen und uns anschauen wie er aufgebaut ist.

Das Tutorial kommt ursprünglich von BuildInternet.com und beinhaltet einen Wechsel zwischen 4 Flickr Bildern, die Einbindung der jQuery Plugins easing und timer, sowie eine timer & switch Anweisung zur Steuerung der Slideshow.


Get the Flash Player to see the wordTube Media Player.

html Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Panning Slideshow | Build Internet Tutorial</title>

	<link rel="stylesheet" href="panning-slideshow.css"/>

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.timer.js"></script>
	<script src="image-rotator.js"></script>

</head>

<body>

	<div id="window">
		<ul id="slideshow">
			<li class="box1"><img src="images/tiger.jpg" alt="Tiger"/></li>
			<li class="box2"><img src="images/macaw.jpg" alt="Macaw"/></li>
			<li class="box3"><img src="images/bald-eagle.jpg" alt="Bald Eagle"/></li>
			<li class="box4"><img src="images/panda.jpg" alt="Panda"/></li>
		</ul>
	</div>
	<div id="content">
		<img src="images/titlecard.jpg" alt="Panning Slideshow with jQuery"/>
		<p>This slideshow uses a few amazing photos found on Flickr. You can find links to them below. This is only the example page. Head back to <a href="#" title="Panning Slideshow Tutorial">Build Internet for the full tutorial</a> and explanation.</p>
	</div>

	<p class="footer">Photo Sources: <a href="http://www.flickr.com/photos/bestrated1/170151875/in/set-72157594168258587">Bald Eagle</a> / <a href="http://www.flickr.com/photos/shanegorski/2515009456/">Tiger</a> / <a href="http://www.flickr.com/photos/auntie_rain/2230329836/">Panda</a> / <a href="http://www.flickr.com/photos/shanegorski/2500050709/in/set-72157605114044891/">Macaw</a></p>
</body>
</html>

css Code

/*
	Panning Slideshow with jQuery
	Build Internet Tutorial (www.buildinternet.com)
	Written by Zach Dunn
*/

*{margin:0; padding:0;}

body{background:#353637; height:100%;}

#window{clear:both; width:960px; height:350px; background:#131310; overflow:hidden; position:relative; margin:10px auto 10px auto;}

#slideshow{width:1920px; height:700px; overflow:hidden; position:relative;}
	#slideshow li{width:960px; height:350px; float:left; display:inline;}

#content{background:#131310 url('images/speech-bubble.jpg') top left no-repeat; color:#FFF; font-family:georgia, serif; width:960px; margin:0px auto 10px auto; overflow:hidden; padding-top:20px;}

	#content p{font-size:16px; line-height:1.6em; padding:40px 30px 30px 0px; margin:0;}
		#content p a{color:#73ccff;}
		#content img{float:left; padding:30px;}

p.footer{text-align:center; color:#ccc; font-size:12px; font-family: arial, sans-serif;}
	p.footer a{color:#73ccff; text-decoration: none;}

jQuery Code

$(document).ready(function() { 

var current_panel = 1;

var animation_duration = 2500;

	$.timer(6000, function (timer) {

		switch(current_panel) {

		case 1:
		$('#slideshow').stop().animate({left: '-960px',top: '0px'}, {easing: 'easeOutBack', duration: animation_duration});
		current_panel = 2;
		break;	

		case 2:
		$('#slideshow').stop().animate({left: '0px',top: '-350px'}, {easing: 'easeOutBack', duration: animation_duration});
		current_panel = 3;
		break;

		case 3:
		$('#slideshow').stop().animate({left: '-960px',top: '-350px'}, {easing: 'easeOutBack', duration: animation_duration});
		current_panel = 4;
		break;

		case 4:
		$('#slideshow').stop().animate({left: '0px',top: '0px'}, {easing: 'easeOutBack', duration: animation_duration});
		current_panel = 1;
		break;
		timer.reset(12000);
		}

	});

});

21 Kommentare zu “#10 Video Tutorial – jQuery Slideshow mit Pfiff”

  1. Mark sagt dazu:

    wirklich sehr gut erklärt.
    da ich aber ziemlich neu in der ganzen sache bin, könntest du mal ein allgemeines tutorial für z.b. diesen slider hier machen?

    http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/#comment-12127

    Mir fällt es nicht leicht hier den Überblick zu bewahren und wäre froh wenn du mich und alle anderen dem näher bringen könntest.

    viele grüße!

  16. Wwtrixcd sagt dazu:

    I’m doing a masters in law underage russian nymphet :]

  17. Endsnyql sagt dazu:

    Could you please repeat that? zeps bbs guide
     =D

  18. Tjefsbja sagt dazu:

    Who do you work for? Bondage Model Milf
     :-(

  19. Lrpykell sagt dazu:

    Pleased to meet you Free Nn Lolita Clips
     pwrnw

  20. Public sex movies sagt dazu:

    efjnvhsbgjl.efbm, Public Sex, YyvfLOD, [url=http://www.publicsex2k.com/]Sex at public[/url], rwRUSvG, http://www.publicsex2k.com/ Dogging public sex, XLIMfHD.

  21. Buy genf20 plus sagt dazu:

    troadhsbgjl.efbm, Genf20 plus order, wmXmthZ, [url=http://www.yourhghguide.com/]Gh releaser[/url], oXkdhjD, http://www.yourhghguide.com/ Growth hormones, vGhZLPp.

Kommentar schreiben