chevron-left chevron-right

[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