Slideshow en html / javascript avec jquery

Commenter

Contenu du snippet

Ce code source est tiré d'un article de mon blog technique présentant la réalisation de deux slideshow (diaporama). La première partie nous ammène a la réalisation de slides en vu de créer un systême de news dynamique et visuellement enrichi tout en gardant un code simple et léger.
La seconde illustre un concept un tout petit peu plus dur, permettant de créer un damier d'images (principalement en vue de créer un album photo ou un nuage de tags sous forme immagée).

IMPORTANT: afin d'aller sur l'article, merci de vérifier qu'il n'y a pas d'espace entre les tirets du site. Il semble y avoir un petit problème dans le systême de description lié a l'envoi d'une source...

http://www.codeyourweb.org/realiser-un-slideshow-en-html-javascript-et-jquery/

PS: Il m'est impossible de poster tout le code (taille du Zip limité a 1Mo), néanmoins vous pourrez trouver le code source complet a l'adresse: http://www.codeyourweb.org/test/simpleSlideshow.zip

Source / Exemple : 


var cursor = -1;
var ended = false;
var slides = [{"title":"Microsoft Internet Explorer","image":"logoIE.png","description":"Internet Explorer 10 exploite la puissance insoupçonnée de votre PC","url":"http://windows.microsoft.com/fr-FR/internet-explorer/download-ie"},
			  {"title":"Google Chrome","image":"logoChrome.png","description":"Un navigateur web rapide et gratuit","url":"http://www.google.fr/intl/fr/chrome/browser/"},
			  {"title":"Mozilla Firefox","image":"logoFirefox.png","description":"Différent par nature","url":"http://www.mozilla.org/fr/firefox/"},
			  {"title":"Opera","image":"logoOpera.png","description":"À la découverte du Web","url":"http://www.opera.com/fr/"},
			  {"title":"Apple Safari","image":"logoSafari.png","description":"Le meilleur moyen de lire sur le Web","url":"http://www.apple.com/fr/safari/"}
			 ];
var animation = null;

$('document').ready(function(){
	intervalLoader();
	animation = setInterval("intervalLoader()",5000);
	
	//manually change slide
	$('#slides li').click(function(){
		if(!ended){ 
			ended = true;
			clearInterval(animation);
		}			
		
		$('#slides li').eq(cursor).removeClass('selected');
		cursor = $(this).index();
		changeSlide(cursor);
	});
	
	// clicks event
	$('#imgSlide, #slideText, #slideTitle').click(function(){
		window.open(slides[cursor]['url'],'_blank');
		clearInterval(animation);
	});

});

// preloading image
function preloadSlide(obj){
	var pic = new Image();
	pic.src = "images/" + obj['image'];
	return pic;
}

function changeSlide(index){
		// current li change style
		$('#slides li').eq(index).addClass('selected');
		$('#slides li').eq(index - 1).removeClass('selected');

		// disappear effect
		$('#slideTitle').fadeOut(400);
		$('#slideText').fadeOut(400);
		$('#imgSlide').fadeOut(600, function(){  
		// change slide
		var nextPic = preloadSlide(slides[index]);
		$('#imgSlide').attr('src', nextPic.src);
		$('#slideTitle').html(slides[index]['title']);
		$('#slideText').html(slides[index]['description']);
		// appear effect
		$('#slideTitle').fadeIn(400);
		$('#slideText').fadeIn(400);
		$('#imgSlide').fadeIn(400);
		});
}

function intervalLoader(){
	if(cursor < slides.length - 1){
		cursor++;
	}else{
		cursor = 0;
		clearInterval(animation);
	}
	
	if(!ended){
		changeSlide(cursor);
	}
	
}

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (shadow1779)