Forum PHP.pl > Jak zrobić taki slider w jquery

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Jak zrobić taki slider w jquery

Forum PHP.pl > Forum > Po stronie przeglądarki

emajl22

30.08.2011, 18:39:31

od razu mowie, ze na jquery znam sie marnie

chce zrobic prosty slider, cos w stylu:

po najechaniu na lewą strzałkę tekst ma się przesuwać w lewo, a po najechaniu na prawą w prawo

zrobiłem na razie coś takiego:

[HTML] pobierz, plaintext 
<!-- Slidebox -->
		<div id="slidebox">
			<a href="" class="l_arrow" id="slide-left" title="Przewiń w lewo"><img src="./images/larrow.png" alt="" /></a>
			<ul class="slide-content">
				<li>To jest przykładowy tekst</li>
			</ul>
			<a href="" class="r_arrow" id="slide-right" title="Przewiń w prawo"><img src="./images/rarrow.png" alt="" /></a>
		</div>
		<!-- End slidebox -->
[HTML] pobierz, plaintext

i jquery:

[HTML] pobierz, plaintext 
<script type="text/javascript">
		$(document).ready(function(){
			$("#slide-left").hover(function() {
 
			});
		});
		$(document).ready(function(){
			$("#slide-right").hover(function() {
 
			});
		});
    </script>
[HTML] pobierz, plaintext

głównie chodzi mi o funkcje, żeby przesuwała tekst w prawo

edit

szukałem w necie jakiegoś rozwiązania i znalazłem jquery.animate() tylko coś mi nie chce działać

zrobiłem tak:

[HTML] pobierz, plaintext 
<script type="text/javascript">
		$(document).ready(function() {
			$("#slide-left").hover(function() {
				$(".slide-content").animate({
					right: '+=50'
				});
			});
		});
    </script>
[HTML] pobierz, plaintext

ale w ogóle nic się nie dzieje po najechaniu na lewą strzałkę

darko

30.08.2011, 20:58:42

U mnie coś takiego działa:

[HTML] pobierz, plaintext 
<html>
	<head>
		<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
		<style>
		.slide-content {position:relative; display:inline;}
		</style>
	</head>
	<body>
		<!-- Slidebox -->
		<div id="slidebox">
			<a href="#" class="l_arrow" title="Przewiń w lewo"><img id="slide-left" src="leftarrow.png" onmouseover="$('.slide-content').animate({left: '-150px'}, 5000, function() {});" alt="" /></a>
			<span class="slide-content">
				To jest przykładowy tekst
			</span>
			<a href="#" class="r_arrow" id="slide-right" title="Przewiń w prawo"><img src="rightarrow.jpeg" onmouseover="$('.slide-content').animate({left: '+150px'}, 5000, function() {});" alt="" /></a>
		</div>
		<!-- End slidebox -->
 
	</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.