[jQuery] Efektowny slider z użyciem klawiatury
W dzisiejszym tutorialu przedstawię sposób na efektowny slider, który będzie obsługiwany między innymi przez klawiaturę.
Taki slider można wykorzystać do tworzenia efektownych prezentacji swoich prac lub prezentacji swoich zdjęć na stronie.
Na początek zaczynamy od kodu HTML:
<div id="prezentacja"> <div id="lewa"><a href="javascript:slide('left');"><img src="left.png" /></a></div> <div id="slider"> <ul id="slider_lista"> <li><a href="#"><img src="avatar.jpg" /></a></li> <li><a href="#"><img src="avatar.jpg" /></a></li> <li><a href="#"><img src="ja.jpg" /></a></li> <li><a href="#"><img src="avatar.jpg" /></a></li> <li><a href="#"><img src="avatar.jpg" /></a></li> <li><a href="#"><img src="ja.jpg" /></a></li> <li><a href="#"><img src="avatar.jpg" /></a></li> <li><a href="#"><img src="avatar.jpg" /></a></li> </ul></div> <div id="prawa"><a href="javascript:slide('right');"><img src="right.png" /></a></div> <input type="hidden" id="hidden_auto_slide_seconds" value=0 /> </div> |
Jak widać, zastosowałem tutaj dwa mikrokody w JavaScript, które odpowiadają za interakcje slidera z użytkownikiem w celu przewinięcia prezentacji.
Teraz przechodzimy do kodu JavaScript, który będzie odpowiadał za całą animację slidera:
$(document).ready(function() { //opcje( 1 - włączony , 0 - wyłączony) var auto_slide = 1; var hover_pause = 1; var key_slide = 1; //prędkość przewijania var auto_slide_seconds = 5000; //UWAGA: wartości czasowe podajemy w milisekundach //przesuń obiekt z ostatniego miejsca na miejsce przed pierwszym. Chodzi o to, żeby użytkownik widział wszystkie pozycje ze slidera bez przerwy. $('#slider_lista li:first').before($('#slider_lista li:last')); //sprawdzenie czy auto-sliding jest włączony if(auto_slide == 1){ var timer = setInterval('slide("right")', auto_slide_seconds); $('#hidden_auto_slide_seconds').val(auto_slide_seconds); } //sprawdzenie czy pauza w efekcie hover jest włączona if(hover_pause == 1){ $('#slider_lista').hover(function(){ //zatrzymanie przesuwania gdy :hover clearInterval(timer) },function(){ //włączenie ruchu timer = setInterval('slide("right")', auto_slide_seconds); }); } //sprawdzenie czy obsługa klawiszy jest włączona if(key_slide == 1){ //ustawianie przycisków do interakcji $(document).bind('keypress', function(e) { //kod przycisku "strzałka w lewo" to: 37, a "strzałka w prawo" to: 39 if(e.keyCode==37){ //przesuń w lewo slide('left'); }else if(e.keyCode==39){ //przesuń w prawo slide('right'); } }); } }); //funkcja przesuwania function slide(where){ //pobieranie szerokości pojedynczego obiektu var item_width = $('#slider_lista li').outerWidth() + 10; //sprawdzenie czy animacja ma iść w prawo czy w lewo if(where == 'left'){ //kalkulacja ruchu w lewo var left_indent = parseInt($('#slider_lista').css('left')) + item_width; }else{ //kalkulacja ruchu w prawo var left_indent = parseInt($('#slider_lista').css('left')) - item_width; } //efekt przesuwania z użyciem biblioteki jQuery $('#slider_lista:not(:animated)').animate({'left' : left_indent},500,function(){ //tworzenie iluzji nieskończonej prezentacji if(where == 'left'){ $('#slider_lista li:first').before($('#slider_lista li:last')); }else{ $('#slider_lista li:last').after($('#slider_lista li:first')); } $('#slider_lista').css({'left' : '-90px'}); }); } |
Powyższy kod został jasno wyjaśniony (tak mi się wydaje), więc nie trzeba tłumaczyć go ponownie.
Na koniec dodamy trochę stylizacji:
#slider { float:left; width:630px; overflow: hidden; background: #F0F0F0; } #slider_lista { position:relative; left:-90px; list-style-type: none; margin: 0px; padding: 0px; width:9999px; padding-bottom:10px; } #slider_lista li{ float: left; width:80px; padding:0px; height:80px; background: #000000; margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px; } #slider_lista li img { .margin-bottom:-4px; /*specjalny trick dla IE*/ cursor:pointer; cursor: hand; border:0px; } #lewa, #prawa{ float:left; height:130px; padding-top: 22px; width:64px; } #lewa img, #prawa img{ border:0; cursor: pointer; cursor: hand; } |
I to by było na tyle. Demo z tego tutoriala można zobaczyć tutaj --> Slider jQuery