jQuery Tutorial – nieskończona, zapętlona karuzela, czyli animowana, obracająca się stopka z banerami



Celem niniejszego tutoriala jest pokazanie, jak można wykonać powyższą karuzelę, która z powodzeniem można zamieścić w stopce naszej strony, tak aby pokazywała loga naszych partnerów lub innych osobistości.

Zaczniemy od przygotowania 2 przykładowych banerów w 2 wersjach kolorystycznych. Do powyższej animacji, wykorzystałem takie, jak pokazane są poniżej.










Teraz zajmiemy się kodem HTML. Dla naszego przykładu, wygląda on następująco.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<head>
	<script src="lib/jquery-1.6.4.js" type="text/javascript"></script>
	<script src="lib/pausePlugin.js" type="text/javascript"></script>
	<script src="carousel.js" type="text/javascript"></script>
	<link href="carousel.css" rel="stylesheet" type="text/css" media="all" />
</head>
 
<body> 
	<div id='carousel_inner'>  
		<ul id='carousel_ul'>  
			<li><a href='http://programowanie.opole.pl' target="_blank"><img src='img/item1_white.jpg' /></a></li>
			<li><a href='http://programowanie.opole.pl' target="_blank"><img src='img/item2_white.jpg' /></a></li>
			<li><a href='http://programowanie.opole.pl' target="_blank"><img src='img/item1_white.jpg' /></a></li>
			<li><a href='http://programowanie.opole.pl' target="_blank"><img src='img/item2_white.jpg' /></a></li>
			<li><a href='http://programowanie.opole.pl' target="_blank"><img src='img/item1_white.jpg' /></a></li>
			<li><a href='http://programowanie.opole.pl' target="_blank"><img src='img/item2_white.jpg' /></a></li>
		</ul>  
	</div>  
</body>

Powyższy kod wymaga trochę opisu. Najpierw zalinkowana jest bibliotek jQuery. Dalej zalinkowany jest bardzo fajny plugin, który umożliwia pauzowanie i wznawianie animacji jQuery. Dostępny jest on: TUTAJ. Dalej mamy zalinkowane JS i CSS, który dopiero napiszemy. Reszta to już tylko nieposegregowana lista wewnątrz DIVa. W kolejne pozycje listy wrzucamy linki z obrazkami zawierającymi banery w wersji monokolorystycznej. Ważny jest też STRICT, żeby wszystko się dobrze wyświetlało w różnych przeglądarkach. Dalej zabieramy się za CSS – wygląda on następująco.

#carousel_inner {  
	width: 630px;
	overflow: hidden;
	background: #F0F0F0;
	margin: 0px;  
	padding: 0px;
}
 
#carousel_ul {  
	position: relative; 
	left: 0px;
	list-style-type: none; 
	margin: 0px;  
	padding: 0px;
	width: 9999px;
}
 
#carousel_ul li{  
	float: left;
	width: 234px;
	height: 60px;  
	padding: 0px;
	margin-top: 10px;  
	margin-bottom: 10px;  
	margin-left: 5px;  
	margin-right: 5px;  
}
 
#carousel_ul li img {   
	cursor: hand;  
	border: 0px;  
}

Opiszę tylko to co najważniejsze. W DIVie ustawiamy overflow na hidden, żeby ukryć te banery, które mają być aktualnie zasłonięte w prawej, dalszej części karuzeli. Listę ustawiamy na relative, żeby dało się ją przesuwać. Kolejne pozycje listy ustawiamy na float: left, żeby układały się obok siebie, a nie jedna pod drugą. Ważne jest żeby ktoś nie pomyślał sobie, że skoro daliśmy left: 0px to można ten atrybut opuścić, bo automatycznie mamy 0px. Nie można ze względu na np. Internet Explorer, który zwracałby NaN zamiast 0, gdybyśmy nie przypisali nic i by się nam wszystko sypało w IE. Na końcu ustawiamy jeszcze brak obwódki dla obrazków, gdyż IE dodaje je automatycznie.

Zostaje jeszcze tylko kod JavaScript i jQuery. Wygląda on następująco.

$(function() {
	$( '#carousel_ul li img' ).hover(
		function( e ) {
			e.currentTarget.src = 'img/' + basename( e ) + '_color.jpg';
			$( '#carousel_ul' ).pause();
		}, function( e ) {
			e.currentTarget.src = 'img/' + basename( e ) + '_white.jpg';
			$( '#carousel_ul' ).resume();
		}
	);
 
	slide();
});  
 
function slide() {
    var item_width = $('#carousel_ul li').outerWidth( true );
    var left_indent = 0 - item_width;  
 
    $( '#carousel_ul' ).animate( {'left' : left_indent}, 6000, 'linear', function() {
        $( '#carousel_ul li:last' ).after( $('#carousel_ul li:first') );
        $( '#carousel_ul' ).css( {'left' : '0px'} );
	slide();
    });
}
 
function basename( error ) {
	var path = error.currentTarget.src;
	var slash_pos = path.lastIndexOf( '/' );
	var filename = path.substring( slash_pos+1 );
	var underscore_pos = filename.lastIndexOf( '_' );
	var basename = filename.substring( 0, underscore_pos );
	return basename;
}

Kod ma 3 części.

Pierwsza część odpowiada za pauzowanie animacji po najechaniu na karuzelę oraz podmianę obrazków przy najechaniu kursorem na dany baner. Dodatkowo, wywoływana jest tu animacja karuzeli.

Druga część to już animacja sama w sobie. Najpierw obliczamy szerokość banera wraz z marginesami i paddingiem. To co otrzymamy to odległość o ile mamy przesunąć nasze banery, aby wykonać pełne przesunięcie o jeden baner. Jako że przesuwamy je w lewo, to minusujemy tą wartość. Dalej, animujemy to przesunięcie z użyciem jQuery. W funkcji, która jest wywoływana po zakończeniu animacji następuje cała magia. Gdy przesunięcie banerów w lewo się zakończy, to pierwszy element (ten który teraz jest niewidoczny z lewej strony) jest przenoszony na koniec karuzeli, a sama karuzela jest ustawiana znowu na pozycję left: 0px.

Ostatnia część to tylko funkcja pomocnicza. Wyciąga ona ze ścieżki obrazka, na którego najechaliśmy myszką tą część nazwy pliku, która znajduje się przed podkreśleniem.

No i tyle…