Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Jak zrobić taki slider w jquery
emajl22
post
Post #1





Grupa: Zarejestrowani
Postów: 273
Pomógł: 21
Dołączył: 28.11.2010

Ostrzeżenie: (10%)
X----

od razu mowie, ze na jquery znam sie marnie

chce zrobic prosty slider, cos w stylu:

(IMG:http://s4.ifotos.pl/img/Beztytulu_hanwepw.png)

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 
  1. <!-- Slidebox -->
  2. 		<div id="slidebox">
  3. 			<a href="" class="l_arrow" id="slide-left" title="Przewiń w lewo"><img src="./images/larrow.png" alt="" /></a>
  4. 			<ul class="slide-content">
  5. 				<li>To jest przykładowy tekst</li>
  6. 			</ul>
  7. 			<a href="" class="r_arrow" id="slide-right" title="Przewiń w prawo"><img src="./images/rarrow.png" alt="" /></a>
  8. 		</div>
  9. 		<!-- End slidebox -->
[HTML] pobierz, plaintext

i jquery:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. 		$(document).ready(function(){
  3. 			$("#slide-left").hover(function() {
  4.  
  5. 			});
  6. 		});
  7. 		$(document).ready(function(){
  8. 			$("#slide-right").hover(function() {
  9.  
  10. 			});
  11. 		});
  12.     </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 
  1. <script type="text/javascript">
  2. 		$(document).ready(function() {
  3. 			$("#slide-left").hover(function() {
  4. 				$(".slide-content").animate({
  5. 					right: '+=50'
  6. 				});
  7. 			});
  8. 		});
  9.     </script>
[HTML] pobierz, plaintext

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

Ten post edytował emajl22 30.08.2011, 20:17:29
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 1)
darko
post
Post #2





Grupa: Zarejestrowani
Postów: 2 885
Pomógł: 463
Dołączył: 3.10.2009
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

U mnie coś takiego działa:
[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  4. 		<style>
  5. 		.slide-content {position:relative; display:inline;}
  6. 		</style>
  7. 	</head>
  8. 	<body>
  9. 		<!-- Slidebox -->
  10. 		<div id="slidebox">
  11. 			<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>
  12. 			<span class="slide-content">
  13. 				To jest przykładowy tekst
  14. 			</span>
  15. 			<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>
  16. 		</div>
  17. 		<!-- End slidebox -->
  18.  
  19. 	</body>
  20. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 13:15
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn